Override Draft.js copy-paste to preserve full editor content

src/demo/components/App.js

@@ -9,6 +9,7 @@ class App extends Component<{}> {
     return (
       <div className="App">
         <DemoEditor extended={false} />
+        <DemoEditor extended={true} />
       </div>
     );
   }

src/demo/components/DemoEditor.js

@@ -13,7 +13,13 @@ import {
 import type { DraftBlockType } from "draft-js/lib/DraftBlockType.js.flow";
 import type { DraftEntityType } from "draft-js/lib/DraftEntityType.js.flow";
 
-import { ListNestingStyles, blockDepthStyleFn } from "../../lib/index";
+import {
+  ListNestingStyles,
+  blockDepthStyleFn,
+  registerCopySource,
+  unregisterCopySource,
+  handleDraftEditorPastedText,
+} from "../../lib/index";
 
 import SentryBoundary from "./SentryBoundary";
 import Highlight from "./Highlight";
@@ -76,6 +82,12 @@ const ENTITIES = [
       src: "^http",
     },
   },
+  {
+    type: "HORIZONTAL_RULE",
+    label: "HR",
+    attributes: [],
+    whitelist: {},
+  },
 ];
 
 const MAX_LIST_NESTING = 15;
@@ -92,6 +104,8 @@ type State = {
  * Demo editor.
  */
 class DemoEditor extends Component<Props, State> {
+  editorRef: ?Object;
+
   constructor(props: Props) {
     super(props);
     const { extended } = props;
@@ -124,6 +138,15 @@ class DemoEditor extends Component<Props, State> {
     (this: any).toggleBlock = this.toggleBlock.bind(this);
     (this: any).toggleEntity = this.toggleEntity.bind(this);
     (this: any).blockRenderer = this.blockRenderer.bind(this);
+    (this: any).handlePastedText = this.handlePastedText.bind(this);
+  }
+
+  componentDidMount() {
+    registerCopySource(this.editorRef);
+  }
+
+  componentWillUnmount() {
+    unregisterCopySource(this.editorRef);
   }
 
   onChange(nextState: EditorState) {
@@ -149,7 +172,7 @@ class DemoEditor extends Component<Props, State> {
     e.preventDefault();
   }
 
-  toggleEntity(type: DraftEntityType) {
+  toggleEntity(type: DraftEntityType | "HORIZONTAL_RULE") {
     const { editorState } = this.state;
     let content = editorState.getCurrentContent();
 
@@ -162,6 +185,13 @@ class DemoEditor extends Component<Props, State> {
       this.onChange(
         AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, " "),
       );
+    } else if (type === "HORIZONTAL_RULE") {
+      // $FlowFixMe
+      content = content.createEntity(type, "IMMUTABLE", {});
+      const entityKey = content.getLastCreatedEntityKey();
+      this.onChange(
+        AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, " "),
+      );
     } else {
       content = content.createEntity(type, "MUTABLE", {
         url: "http://www.example.com/",
@@ -173,16 +203,52 @@ class DemoEditor extends Component<Props, State> {
   }
 
   blockRenderer(block: ContentBlock) {
+    const { editorState } = this.state;
+    const content = editorState.getCurrentContent();
+
     if (block.getType() !== "atomic") {
       return null;
     }
 
+    const entityKey = block.getEntityAt(0);
+
+    if (!entityKey) {
+      return {
+        editable: false,
+      };
+    }
+
+    const entity = content.getEntity(entityKey);
+
+    if (entity.getType() === "HORIZONTAL_RULE") {
+      return {
+        component: () => <hr />,
+        editable: false,
+      };
+    }
+
     return {
       component: Image,
       editable: false,
     };
   }
 
+  handlePastedText(text: string, html: ?string, editorState: EditorState) {
+    let newState = handleDraftEditorPastedText(
+      this.editorRef,
+      text,
+      html,
+      editorState,
+    );
+
+    if (newState) {
+      this.onChange(newState);
+      return true;
+    }
+
+    return false;
+  }
+
   onTab(event: SyntheticKeyboardEvent<>) {
     const { editorState } = this.state;
     const newState = RichUtils.onTab(event, editorState, MAX_LIST_NESTING);
@@ -226,12 +292,16 @@ class DemoEditor extends Component<Props, State> {
             ))}
           </div>
           <Editor
+            ref={(ref) => {
+              this.editorRef = ref;
+            }}
             editorState={editorState}
             onChange={this.onChange}
             stripPastedStyles={false}
             blockRendererFn={this.blockRenderer}
             blockStyleFn={blockDepthStyleFn}
             onTab={this.onTab}
+            handlePastedText={this.handlePastedText}
           />
         </SentryBoundary>
         <ListNestingStyles max={MAX_LIST_NESTING} />

src/demo/components/DemoEditor.test.js

@@ -90,31 +90,110 @@ describe("DemoEditor", () => {
     expect(RichUtils.toggleBlockType).toHaveBeenCalled();
   });
 
-  it("toggleEntity - LINK", () => {
-    shallow(<DemoEditor extended={false} />)
-      .instance()
-      .toggleEntity("LINK");
+  describe("toggleEntity", () => {
+    it("LINK", () => {
+      shallow(<DemoEditor extended={false} />)
+        .instance()
+        .toggleEntity("LINK");
 
-    expect(RichUtils.toggleLink).toHaveBeenCalled();
-  });
+      expect(RichUtils.toggleLink).toHaveBeenCalled();
+    });
 
-  it("toggleEntity - IMAGE", () => {
-    shallow(<DemoEditor extended={false} />)
-      .instance()
-      .toggleEntity("IMAGE");
+    it("IMAGE", () => {
+      shallow(<DemoEditor extended={false} />)
+        .instance()
+        .toggleEntity("IMAGE");
 
-    expect(AtomicBlockUtils.insertAtomicBlock).toHaveBeenCalled();
-  });
+      expect(AtomicBlockUtils.insertAtomicBlock).toHaveBeenCalled();
+    });
 
-  it("blockRenderer", () => {
-    expect(
+    it("HORIZONTAL_RULE", () => {
       shallow(<DemoEditor extended={false} />)
+        .instance()
+        .toggleEntity("HORIZONTAL_RULE");
+
+      expect(AtomicBlockUtils.insertAtomicBlock).toHaveBeenCalled();
+    });
+  });
+
+  describe("blockRenderer", () => {
+    it("unstyled", () => {
+      expect(
+        shallow(<DemoEditor extended={false} />)
+          .instance()
+          .blockRenderer({
+            getType: () => "unstyled",
+          }),
+      ).toBe(null);
+    });
+
+    it("HORIZONTAL_RULE", () => {
+      window.sessionStorage.getItem = jest.fn(() =>
+        JSON.stringify({
+          entityMap: {
+            "3": {
+              type: "HORIZONTAL_RULE",
+              data: {},
+            },
+          },
+          blocks: [
+            {
+              type: "atomic",
+              text: " ",
+              entityRanges: [
+                {
+                  key: 3,
+                  offset: 0,
+                  length: 1,
+                },
+              ],
+            },
+          ],
+        }),
+      );
+      const Component = shallow(<DemoEditor extended={true} />)
         .instance()
         .blockRenderer({
           getType: () => "atomic",
+          getEntityAt: () => "3",
+        }).component;
+      expect(Component()).toEqual(<hr />);
+    });
+
+    it("IMAGE", () => {
+      window.sessionStorage.getItem = jest.fn(() =>
+        JSON.stringify({
+          entityMap: {
+            "1": {
+              type: "IMAGE",
+              data: {
+                src: "example.png",
+              },
+            },
+          },
+          blocks: [
+            {
+              type: "atomic",
+              text: " ",
+              entityRanges: [
+                {
+                  key: 1,
+                  offset: 0,
+                  length: 1,
+                },
+              ],
+            },
+          ],
         }),
-    ).toMatchObject({
-      editable: false,
+      );
+
+      const Component = shallow(<DemoEditor extended={true} />)
+        .instance()
+        .blockRenderer({
+          getType: () => "atomic",
+          getEntityAt: () => "1",
+        }).component;
+      expect(<Component />).toMatchSnapshot();
     });
   });
 

src/demo/components/__snapshots__/App.test.js.snap

@@ -7,5 +7,8 @@ exports[`App renders 1`] = `
   <DemoEditor
     extended={false}
   />
+  <DemoEditor
+    extended={true}
+  />
 </div>
 `;

src/demo/components/__snapshots__/DemoEditor.test.js.snap

@@ -112,9 +112,17 @@ exports[`DemoEditor #extended works 1`] = `
   >
     📷
   </button>
+  <button
+    key="HORIZONTAL_RULE"
+    onMouseDown={[Function]}
+  >
+    HR
+  </button>
 </div>
 `;
 
+exports[`DemoEditor blockRenderer IMAGE 1`] = `<Image />`;
+
 exports[`DemoEditor renders 1`] = `
 <div
   className="EditorToolbar"
@@ -185,5 +193,11 @@ exports[`DemoEditor renders 1`] = `
   >
     📷
   </button>
+  <button
+    key="HORIZONTAL_RULE"
+    onMouseDown={[Function]}
+  >
+    HR
+  </button>
 </div>
 `;