Add support for extensions using the draft-js-plugins architecture

.flowconfig

@@ -5,6 +5,8 @@
 .*/node_modules/draft-js/lib/DraftEditorLeaf.react.js.flow
 .*/node_modules/draft-js/lib/DraftEditorDragHandler.js.flow
 .*/node_modules/draft-js/lib/DraftEditor.react.js.flow
+.*/node_modules/draft-js-plugins-editor/lib/Editor/index.js.flow
+.*/node_modules/draft-js-plugins-editor/lib/index.js.flow
 # .*/node_modules/config-chain
 suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
 

.storybook/config.js

@@ -44,4 +44,5 @@ configure(() => {
   require("../examples/docs.story");
   require("../examples/performance.story");
   require("../examples/tests.story");
+  require("../examples/plugins.story");
 }, module);

CHANGELOG.md

@@ -6,6 +6,22 @@
 
 > Documentation: [draftail.org/docs/next/getting-started](https://www.draftail.org/docs/next/getting-started)
 
+🎉 blog post for this release: [Draftail v1.2.0: supporting modern experiences](https://www.draftail.org/blog/2019/03/03/draftail-v1-2-0-supporting-modern-experiences).
+
+### Added
+
+- Add [`plugins`](https://www.draftail.org/docs/plugins) API to support extensions of the editor using the [draft-js-plugins](https://github.com/draft-js-plugins/draft-js-plugins) architecture ([#83](https://github.com/springload/draftail/issues/83), [#171](https://github.com/springload/draftail/pull/171)).
+
+This new API makes it possible to build much more advanced extensions to the editor than ever before, such as autocompletes, [linkify](https://www.draftail.org/docs/extensions-tutorial-linkify), [custom blocks](https://www.draftail.org/docs/blocks#custom-block-rendering), [custom toolbars](https://www.draftail.org/docs/customising-toolbars), and more. Read the [release blog post](https://www.draftail.org/blog/2019/03/03/draftail-v1-2-0-supporting-modern-experiences) to learn more about the motivation for those new APIs.
+
+- Add data reset parameter to `DraftUtils.resetBlockWithType()`.
+- Add ability to disable or customise the editor toolbar with [`topToolbar`](https://www.draftail.org/docs/customising-toolbars).
+- Add ability to add a toolbar below the editor with [`bottomToolbar`](https://www.draftail.org/docs/customising-toolbars).
+
+### Changed
+
+- Enable list continuation on Enter for custom `*-list-item` blocks. All that’s required is for the block type to end with `-list-item`.
+
 ## [[v1.1.0]](https://github.com/springload/draftail/releases/tag/v1.1.0)
 
 > Documentation: [draftail.org/docs/getting-started](https://www.draftail.org/docs/getting-started)

README.md

@@ -11,13 +11,14 @@ Draftail aims for a mouse-free, keyboard-centric experience. Most formatting can
 Here are important features worth highlighting:
 
 - Support for [keyboard shortcuts](https://www.draftail.org/docs/keyboard-shortcuts). Lots of them!
-- Paste from Word. Or any other editor.
+- Paste from Word. Or any other editor. It just works.
 - Autolists – start a line with `-` , `*` , `1.` to create a list item.
 - Shortcuts for heading levels `##`, code blocks ` ``` `, and more.
 - Undo / redo – until the end of times.
 - Common text types: headings, paragraphs, quotes, lists.
 - Common text styles: Bold, italic, and many more.
 - API to build custom controls for links, images, and more.
+- Compatibility with the [`draft-js-plugins`](https://www.draft-js-plugins.com) ecosystem to build more advanced extensions.
 
 > This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html), and measures performance and [code coverage](https://coveralls.io/github/springload/draftail). It uses [Flow](https://flow.org/) types. We also try to follow accessibility best practices (tested with [aXe](https://www.axe-core.org/)) – please [get in touch](https://github.com/springload/draftail/issues/149#issuecomment-389476151) if you can help us do better in this area.
 

examples/constants/customContentState.js

@@ -1,66 +1,44 @@
 // @flow
 export default {
-  entityMap: {
-    "0": {
-      type: "DOCUMENT",
-      mutability: "MUTABLE",
-      data: {
-        url: "doc.pdf",
-        title: "Kritik der reinen Vernunft",
-      },
-    },
-    "1": {
-      type: "EMBED",
-      mutability: "IMMUTABLE",
-      data: {
-        url: "http://www.youtube.com/watch?v=y8Kyi0WNg40",
-        title: "Dramatic Look",
-        thumbnail: "/static/example-lowres-image2.jpg",
-      },
-    },
-  },
   blocks: [
     {
       key: "c1gc9",
-      text: "You can implement custom block types as required.",
-      type: "tiny-text",
-      depth: 0,
-      inlineStyleRanges: [],
-      entityRanges: [],
-      data: {},
-    },
-    {
-      key: "bldpo",
       text:
-        "And also inline styles. Or abuse the entity API to make text decorators.",
-      type: "unstyled",
+        "You can implement custom block types as required, and inline styles too, or entities.",
+      type: "tiny-text",
       depth: 0,
       inlineStyleRanges: [
         {
-          offset: 9,
+          offset: 54,
           length: 13,
           style: "REDACTED",
         },
-        {
-          offset: 27,
-          length: 5,
-          style: "REDACTED",
-        },
-        {
-          offset: 56,
-          length: 15,
-          style: "REDACTED",
-        },
       ],
       entityRanges: [
         {
-          offset: 44,
-          length: 3,
+          offset: 76,
+          length: 8,
           key: 0,
         },
       ],
       data: {},
     },
+    {
+      key: "7dtlg",
+      text:
+        "Draftail also supports the #plugins architecture of draft-js-plugins.",
+      type: "unstyled",
+      depth: 0,
+      inlineStyleRanges: [
+        {
+          offset: 52,
+          length: 16,
+          style: "BOLD",
+        },
+      ],
+      entityRanges: [],
+      data: {},
+    },
     {
       key: "affm4",
       text: " ",
@@ -104,4 +82,22 @@ export default {
       data: {},
     },
   ],
+  entityMap: {
+    "0": {
+      type: "DOCUMENT",
+      mutability: "MUTABLE",
+      data: {
+        url: "docs.pdf",
+      },
+    },
+    "1": {
+      type: "EMBED",
+      mutability: "IMMUTABLE",
+      data: {
+        url: "http://www.youtube.com/watch?v=y8Kyi0WNg40",
+        title: "Dramatic Look",
+        thumbnail: "/static/example-lowres-image2.jpg",
+      },
+    },
+  },
 };

examples/docs.story.js

@@ -222,6 +222,80 @@ storiesOf("Docs", module)
       />
     </div>
   ))
+  .add("No toolbar", () => (
+    <div className="no-toolbar">
+      <EditorWrapper
+        id="no-toolbar"
+        rawContentState={{
+          blocks: [
+            {
+              text:
+                "Disable the toolbar to save space if your editor only supports a handful of formats",
+              inlineStyleRanges: [
+                {
+                  offset: 23,
+                  length: 10,
+                  style: "ITALIC",
+                },
+              ],
+            },
+          ],
+          entityMap: {},
+        }}
+        stripPastedStyles={false}
+        inlineStyles={[INLINE_CONTROL.BOLD, INLINE_CONTROL.ITALIC]}
+        topToolbar={null}
+      />
+    </div>
+  ))
+  .add("Custom toolbars", () => (
+    <div className="docs-custom-toolbars">
+      <EditorWrapper
+        id="custom-toolbars"
+        rawContentState={{
+          blocks: [
+            {
+              text: "Use custom toolbars for more flexibility.",
+            },
+          ],
+          entityMap: {},
+        }}
+        stripPastedStyles={false}
+        blockTypes={[
+          BLOCK_CONTROL.HEADER_TWO,
+          BLOCK_CONTROL.HEADER_THREE,
+          BLOCK_CONTROL.HEADER_FOUR,
+        ]}
+        topToolbar={({ toggleBlockType, currentBlock }) => (
+          <div className="Draftail-Toolbar" role="toolbar">
+            <select
+              value={currentBlock}
+              onChange={(e) => toggleBlockType(e.target.value)}
+            >
+              {[
+                [BLOCK_TYPE.HEADER_TWO, "H2"],
+                [BLOCK_TYPE.HEADER_THREE, "H3"],
+                [BLOCK_TYPE.HEADER_FOUR, "H4"],
+                [BLOCK_TYPE.UNSTYLED, "¶"],
+              ].map(([type, label]) => (
+                <option key={type} value={type}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+        bottomToolbar={({ getEditorState }) => (
+          <div
+            className="Draftail-Toolbar Draftail-Toolbar--bottom"
+            role="toolbar"
+          >
+            <ReadingTime getEditorState={getEditorState} />
+          </div>
+        )}
+      />
+    </div>
+  ))
   .add("Icons", () => (
     <EditorWrapper
       id="docs-icons"

examples/examples.story.js

@@ -1,5 +1,6 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
+import createHashtagPlugin from "draft-js-hashtag-plugin";
 
 import {
   INLINE_CONTROL,
@@ -16,6 +17,8 @@ import ReadingTime from "./components/ReadingTime";
 import customContentState from "./constants/customContentState";
 import allContentState from "./constants/allContentState";
 
+const hashtagPlugin = createHashtagPlugin();
+
 storiesOf("Examples", module)
   .add("Wagtail features", () => (
     <main>
@@ -80,6 +83,7 @@ storiesOf("Examples", module)
       entityTypes={[ENTITY_CONTROL.EMBED, ENTITY_CONTROL.DOCUMENT]}
       decorators={[new PrismDecorator({ defaultLanguage: "css" })]}
       controls={[ReadingTime]}
+      plugins={[hashtagPlugin]}
     />
   ))
   .add("All built-in formats", () => (

examples/main.scss

@@ -36,6 +36,9 @@ $draftail-editor-chrome-accent: lighten(
 $draftail-editor-font-family: $FONT_FAMILY_SANS;
 
 @import "../node_modules/draft-js/dist/Draft";
+@import "../node_modules/draft-js-hashtag-plugin/lib/plugin";
+@import "../node_modules/draft-js-inline-toolbar-plugin/lib/plugin";
+@import "../node_modules/draft-js-side-toolbar-plugin/lib/plugin";
 @import "../lib/index";
 
 @import "./components/editor";
@@ -53,4 +56,7 @@ $draftail-editor-font-family: $FONT_FAMILY_SANS;
 @import "./blocks/EmbedBlock";
 @import "./blocks/ImageBlock";
 
+@import "./plugins/actionBlockPlugin";
+@import "./plugins/sectionBreakPlugin";
+
 @import "./utils/utilities";