{"id":13578253,"url":"https://github.com/CannerCMS/canner-slate-editor","last_synced_at":"2025-04-05T16:32:05.978Z","repository":{"id":37706324,"uuid":"126601938","full_name":"CannerCMS/canner-slate-editor","owner":"CannerCMS","description":"📝Rich Text / WYSIWYG Editor built for Modularity and Extensibility.","archived":false,"fork":false,"pushed_at":"2020-06-27T02:03:36.000Z","size":20566,"stargazers_count":1142,"open_issues_count":31,"forks_count":81,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-04-03T22:08:43.156Z","etag":null,"topics":["editor","markdown","md","rich-text-editor","slate","wysiwyg","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"https://canner.github.io/canner-slate-editor/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CannerCMS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-24T13:28:25.000Z","updated_at":"2025-03-15T17:07:22.000Z","dependencies_parsed_at":"2022-08-08T21:16:29.102Z","dependency_job_id":null,"html_url":"https://github.com/CannerCMS/canner-slate-editor","commit_stats":null,"previous_names":["canner/canner-slate-editor","canner/slate-md-editor"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fcanner-slate-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fcanner-slate-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fcanner-slate-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fcanner-slate-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CannerCMS","download_url":"https://codeload.github.com/CannerCMS/canner-slate-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247366503,"owners_count":20927524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","markdown","md","rich-text-editor","slate","wysiwyg","wysiwyg-editor"],"created_at":"2024-08-01T15:01:28.803Z","updated_at":"2025-04-05T16:32:05.973Z","avatar_url":"https://github.com/CannerCMS.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# canner-slate-editor [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/) [![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](https://canner.github.io/canner-slate-editor/)\n\n\u003e 📝 Rich text / WYSIWYG editor focus on **modularity and extensibility**, build on top of [Slate framework](https://docs.slatejs.org) with beautiful designs and high-level APIs.\n\n### Features 😍\n\n* [x] **20+ Editor Features**, support [list](https://github.com/Canner/canner-slate-editor#3-slate-icons)\n* [x] **Markdown Syntax**, support [list](https://canner.github.io/canner-slate-editor/?selectedKind=canner-slate-editor\u0026selectedStory=Hot%20keys%20%26%20Formatting\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=0\u0026addonPanel=storybook%2Factions%2Factions-panel)\n* [x] **Hot Keys**, support [list](https://canner.github.io/canner-slate-editor/?selectedKind=canner-slate-editor\u0026selectedStory=Hot%20keys%20%26%20Formatting\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=0\u0026addonPanel=storybook%2Factions%2Factions-panel)\n* [x] **Full Screen Edit mode**\n* [x] **[Serialize](https://canner.github.io/canner-slate-editor/?selectedKind=slate-md-editor\u0026selectedStory=With%20HTML%20serializer\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=0) and Deserialize into HTML**\n* [x] **Copy and Paste HTML in Editor**\n* [x] Support **Toolbar**\n* [x] Support **Sidebar**\n\n👇 **_canner-slate-editor is a modulized editor, everything is a npm module! You could 100% compose to your personal usage!_**\n\n\u003cimg src=\"./preview/demo-module.png\"/\u003e\n\n## Why another Editor?\n\n**Since this project is originally started from [Canner](https://github.com/Canner/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.**\n\nThere are many other rich text and WYSIWYG editors online, but as [slate - why section](https://github.com/ianstormtaylor/slate#why) mentioned that most of these solutions are\n\n1.  Not small and reusable\n2.  Hardcoded and hard to customize\n3.  Re-inventing the view layer seemed inefficient and limiting\n4.  ...\n\nHence, 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! 🙌\n\n## Notice\n\nThis project is using [Antd](https://ant.design/) as our primiary UI library.\n\n**_Why_**\n\n1.  Complete React UI solutions.\n2.  Easy to customize styles: https://ant.design/docs/react/customize-theme\n3.  Build-in i18n: https://ant.design/docs/react/i18n\n\nOne of the downside of using it, is it will increase your bundle size. see [here for solution](https://github.com/Canner/canner-slate-editor#2-editors-bundle-size-is-too-large)\n\n## Setting up Webpack\n\nYou will need to add `css` and `less` test rules in your webpack setting.\n\n```js\n...\nrules: [\n  {\n    test: /\\.js$/,\n    use: {\n      loader: \"babel-loader\"\n    },\n    exclude: /node_modules/\n  },\n  {\n    test: /\\.css$/,\n    use: [\n      {\n        loader: \"style-loader\"\n      },\n      {\n        loader: \"css-loader\"\n      }\n    ]\n  },\n  {\n    test: /\\.less$/,\n    use: [\n      {\n        loader: \"style-loader\"\n      },\n      {\n        loader: \"css-loader\"\n      },\n      {\n        loader: \"less-loader\"\n      }\n    ]\n  }\n]\n...\n```\n\n# Project structure\n\nThis 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.\n\n## 1. canner-slate-editor [![npm-image](https://badge.fury.io/js/canner-slate-editor.svg)](https://www.npmjs.com/package/canner-slate-editor)\n\n\u003e Another rich text editor using Slate framework, with beautiful design\n\n### Installation\n\n```sh\n$ npm install --save canner-slate-editor\n```\n\nYou will also need to install\n\n```\n$ npm install antd slate slate-react\n```\n\n* Learn more [canner-slate-editor](./packages/editors/canner-slate-editor)\n* [Demo](https://canner.github.io/canner-slate-editor/?selectedKind=canner-slate-editor)\n\n\u003cimg src=\"./preview/demo.png\"/\u003e\n\n## 2. slate-md-editor [![npm-image](https://badge.fury.io/js/slate-md-editor.svg)](https://www.npmjs.com/package/slate-md-editor)\n\n\u003e A markdown editor, that allows you to edit live with hot keys support!\n\n### Installation\n\n```sh\n$ npm install --save slate-md-editor\n```\n\nYou will also need to install\n\n```\n$ npm install antd slate slate-react\n```\n\n* Learn more [slate-md-editor](./packages/editors/slate-md-editor)\n* [Demo](https://canner.github.io/canner-slate-editor/?selectedKind=slate-md-editor)\n\n\u003cimg src=\"https://i.imgur.com/OqQMMiC.gif\" height=\"600px\" style=\"border:1px solid #CCC;\"/\u003e\n\n## 3. slate-icons\n\n\u003e 20+ shared slate icons and helpers for Slate editors.\n\n**_Supported features:_**\n\n* [Align - @canner/slate-icon-align](./packages/slate-icons/align) - center, left, right\n* [Blockquote - @canner/slate-icon-blockquote](./packages/slate-icons/blockquote)\n* [Bold - @canner/slate-icon-bold](./packages/slate-icons/bold)\n* [Clean - @canner/slate-icon-clean](./packages/slate-icons/clean)\n* [Code - @canner/slate-icon-code](./packages/slate-icons/code)\n* [CodeBlock - @canner/slate-icon-codeblock](./packages/slate-icons/codeblock)\n* [Emoji - @canner/slate-icon-emoji](./packages/slate-icons/emoji)\n* [Font background color - @canner/slate-icon-fontbgcolor](./packages/slate-icons/font-bg-color)\n* [Font color - @canner/slate-icon-fontcolor](./packages/slate-icons/font-color)\n* [Hr - @canner/slate-icon-hr](./packages/slate-icons/hr)\n* [Header - @canner/slate-icon-header](./packages/slate-icons/header) - header 1, header 2, header 3, header 4, header 5, header 6\n* [Image - @canner/slate-icon-image](./packages/slate-icons/image)\n* [Indent - @canner/slate-icon-indent](./packages/slate-icons/indent) - indent, outdent\n* [Italic - @canner/slate-icon-italic](./packages/slate-icons/italic)\n* [Link - @canner/slate-icon-link](./packages/slate-icons/link)\n* [List - @canner/slate-icon-list](./packages/slate-icons/list) - Ol list, Ul list\n* [Strike through - @canner/slate-icon-strikethrough](./packages/slate-icons/strikethrough)\n* [Underline - @canner/slate-icon-underline](./packages/slate-icons/underline)\n* [Undo - @canner/slate-icon-undo](./packages/slate-icons/undo)\n* [Redo - @canner/slate-icon-redo](./packages/slate-icons/redo)\n* [Video - @canner/slate-icon-video](./packages/slate-icons/video)\n* [Table - @canner/slate-icon-table](./packages/slate-icons/table)\n\n👉 Learn more [slate-icons](./packages/slate-icons)\n\n## 4. slate-selectors\n\n\u003e shared slate selectors for Slate editors.\n\n**_Supported selectors:_**\n\n* [Font size - @canner/slate-select-fontsize](./packages/slate-selectors/fontsize)\n* [Line height - @canner/slate-select-lineheight](./packages/slate-selectors/line-height)\n* [Letter spacing - @canner/slate-letterspacing](./packages/slate-selectors/letter-spacing)\n\n👉 Learn more [slate-selectors](./packages/slate-selectors)\n\n## 5. quill-icons ![npm-image](https://badge.fury.io/js/quill-icons.svg)\n\n\u003e Icons extract from quill editor with React component wrapper, support 65+ icons!\n\n### Installation\n\n```sh\n$ npm install --save quill-icons\n```\n\n* Learn more [quill-icons](./packages/quill-icons)\n* [Complete list](https://canner.github.io/canner-slate-editor/?selectedKind=Quill%20icons)\n\n## 6. slate plugins\n\n\u003e A set of slate plugins.\n\n* [plugins](./packages/plugins)\n\n## 7. slate-utils \u0026 slate-changes\n\n\u003e A set of changes and utility functions for Slate editors\n\n* [changes](./packages/changes)\n* [utils](./packages/utils)\n* [renderer](./packages/renderer)\n\n## 8. Editor utils components\n\n\u003e A set of editor utility components.\n\n* [sidebar](./packages/components/sidebar)\n  * [Demo](https://canner.github.io/canner-slate-editor/?selectedKind=Editor%20sidebar)\n* [toolbar](./packages/components/toolbar)\n  * [Demo](https://canner.github.io/canner-slate-editor/?selectedKind=Editor%20popup%20toolbar)\n\n## 9. slate-constant\n\n\u003e Share constants through repos.\n\n👉 Learn more [slate-constant](./packages/slate-constant)\n\n# Development\n\nWe are using `yarn` workspace to manage all repos, learn more about [Yarn workspace](https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/)\n\nTo install packages\n\n```\nyarn\n```\n\nSee demos\n\n```\nnpm start\n```\n\n# Test\n\nYou need to build js files through babel by entering\n\n```\nyarn run build:watch\n```\n\n## Run test independently\n\n```\nyarn jest \u003c...path/to/pkg\u003e [--coverage]\n```\n\n# FAQ\n\n## 1. Why not use Slate directly?\n\n[`Slate`](https://github.com/ianstormtaylor/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](https://github.com/ianstormtaylor/slate#why)), 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.\n\nThis 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.\n\n## 2. Editor's bundle size is too large?\n\n`canner-slate-editor` is using an awesome React library called [Ant Design](https://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:\n\n1.  At Canner, our solution is to external antd in your bundler, and use CDN instead.\n2.  [Use modularized antd](https://ant.design/docs/react/introduce#Use-modularized-antd) to reduce your bundle size.\n\n\u003ca href=\"https://canner.io\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/26116324/37811196-a437d930-2e93-11e8-97d8-0653ace2a46d.png\"/\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCannerCMS%2Fcanner-slate-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCannerCMS%2Fcanner-slate-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCannerCMS%2Fcanner-slate-editor/lists"}