WIP: Support advanced customisations to block rendering (#169)

examples/blocks/Blockquote.js

@@ -0,0 +1,41 @@
+// @flow
+import React from "react";
+import { EditorBlock } from "draft-js";
+
+// import { updateDataOfBlock } from "../../model/";
+
+type Props = {|
+  block: ContentBlock,
+  blockProps: BlockProps,
+|};
+
+class Blockquote extends React.Component<Props> {
+  constructor(props) {
+    super(props);
+    this.updateData = this.updateData.bind(this);
+  }
+
+  updateData() {
+    const { block, blockProps } = this.props;
+    const { setEditorState, getEditorState } = blockProps;
+    const data = block.getData();
+    const checked = data.has("checked") && data.get("checked") === true;
+    const newData = data.set("checked", !checked);
+    setEditorState(updateDataOfBlock(getEditorState(), block, newData));
+  }
+
+  render() {
+    const { block } = this.props;
+    const data = block.getData();
+    return (
+      <div>
+        <EditorBlock {...this.props} />
+        <span contentEditable={false}>
+          <input type="text" />
+        </span>
+      </div>
+    );
+  }
+}
+
+export default Blockquote;

examples/constants/ui.js

@@ -12,6 +12,7 @@ import Document, { DOCUMENT_ICON } from "../entities/Document";
 
 import EmbedBlock from "../blocks/EmbedBlock";
 import ImageBlock from "../blocks/ImageBlock";
+import Blockquote from "../blocks/Blockquote";
 
 import FontIcon from "../components/FontIcon";
 
@@ -115,3 +116,22 @@ export const REDACTED_STYLE = {
   description: "Redacted",
   style: { backgroundColor: "currentcolor" },
 };
+
+export const SECTION_BREAK_BLOCK = {
+  type: "section-break",
+  description: "Section break",
+  icon:
+    "M256 384V0h768v384h-64V64H320v320h-64zm768 192v448H256V576h64v384h640V576h64zM512 448h128v64H512v-64zm-192 0h128v64H320v-64zm384 0h128v64H704v-64zm192 0h128v64H896v-64zM0 288l192 192L0 672V288z",
+  block: {
+    component: () => <span>Section break</span>,
+    editable: false,
+  },
+};
+
+export const BLOCKQUOTE_BLOCK = {
+  type: BLOCK_TYPE.BLOCKQUOTE,
+  block: {
+    component: Blockquote,
+    editable: true,
+  },
+};

examples/docs.story.js

@@ -13,6 +13,8 @@ import {
   ENTITY_CONTROL,
   REDACTED_STYLE,
   BR_ICON,
+  SECTION_BREAK_BLOCK,
+  BLOCKQUOTE_BLOCK,
 } from "./constants/ui";
 
 import EditorWrapper from "./components/EditorWrapper";
@@ -96,6 +98,31 @@ storiesOf("Docs", module)
       ]}
     />
   ))
+  .add("Custom block rendering", () => (
+    <EditorWrapper
+      id="docs-custom-block-rendering"
+      rawContentState={{
+        blocks: [
+          {
+            text: "This content is part of the first section",
+            type: "unstyled",
+          },
+          {
+            text: "",
+            type: "section-break",
+          },
+          {
+            text: "This will be the second section",
+            type: "unstyled",
+          },
+        ],
+        entityMap: {},
+      }}
+      stripPastedStyles={false}
+      inlineStyles={[INLINE_CONTROL.BOLD]}
+      blockTypes={[SECTION_BREAK_BLOCK, BLOCKQUOTE_BLOCK]}
+    />
+  ))
   .add("Entities", () => (
     <EditorWrapper
       id="docs-entities"

examples/main.scss

@@ -4,6 +4,7 @@ $WHITE: #fff;
 $BLACK: #000;
 $GREY_333: #333;
 $GREY_999: #999;
+$GREY_AAA: #aaa;
 $TEAL_WAGTAIL: #43b1b0;
 $TEAL_WAGTAIL_DARK: #358c8b;
 $LIGHT_BLUE_EEF8FF: #eef8ff;

examples/utils/_utilities.scss

@@ -14,6 +14,23 @@
   font-style: italic;
 }
 
+.Draftail-block--section-break {
+  $spacing: 1rem;
+
+  pointer-events: none;
+  user-select: none;
+  text-align: center;
+  color: $GREY_AAA;
+  border-bottom: 1px solid currentColor;
+  line-height: 0.1em;
+  margin: $spacing * 2;
+
+  > span {
+    background-color: $WHITE;
+    padding: $spacing * 1;
+  }
+}
+
 .docs-ui-theming .Draftail-Toolbar {
   border: 0;
   background: transparent;

lib/components/DraftailEditor.js

@@ -651,11 +651,33 @@ class DraftailEditor extends Component<Props, State> {
 
   /* :: blockRenderer: (block: ContentBlock) => {}; */
   blockRenderer(block: ContentBlock) {
-    const { entityTypes } = this.props;
+    const { blockTypes, entityTypes } = this.props;
     const { editorState } = this.state;
-    const contentState = editorState.getCurrentContent();
 
-    if (block.getType() !== BLOCK_TYPE.ATOMIC) {
+    const type = block.getType();
+    const blockType = blockTypes.find((b) => b.type === type);
+
+    // The block should use the configured custom rendering.
+    if (blockType && blockType.block) {
+      return {
+        component: blockType.block.component,
+        editable: blockType.block.editable,
+        props: {
+          // The editorState is available for arbitrary content manipulation.
+          editorState,
+          // Whole blockType configuration, as provided to the editor.
+          blockType,
+          // Make the whole editor read-only, except for the block.
+          lockEditor: this.lockEditor,
+          // Make the editor editable again.
+          unlockEditor: this.unlockEditor,
+          // Update the editorState with arbitrary changes.
+          onChange: this.onChange,
+        },
+      };
+    }
+
+    if (type !== BLOCK_TYPE.ATOMIC) {
       return null;
     }
 
@@ -667,6 +689,7 @@ class DraftailEditor extends Component<Props, State> {
       };
     }
 
+    const contentState = editorState.getCurrentContent();
     const entity = contentState.getEntity(entityKey);
     const isHorizontalRule = entity.type === ENTITY_TYPE.HORIZONTAL_RULE;