- update atomic block plugin with some behaviours

- add utility methods
- add editorRef to plugin and editor props

Author: juliankrispel

examples/block-switcher/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@djsp/block-insert",
+  "name": "@djsp/block-switcher",
   "homepage": "https://juliankrispel.github.io/@djsp/core",
   "version": "0.1.0",
   "private": true,

packages/atomic-block/.flowconfig

@@ -4,6 +4,7 @@
 .*/node_modules/@octokit/.*
 .*/node_modules/@types/.*
 .*/node_modules/\([a-c]\|[g-h]\|e\|[j-z]\).*/.*
+.*/EditorContainer/.*
 
 
 [include]

packages/atomic-block/rollup.config.js

@@ -8,7 +8,12 @@ import url from 'rollup-plugin-url'
 import pkg from './package.json'
 
 export default {
-  external: ['@djsp/core', 'draft-js'],
+  external: [
+    'draft-js/lib/DraftOffsetKey',
+    '@djsp/core',
+    '@djsp/utils',
+    'draft-js',
+  ],
   input: 'src/index.js',
   output: [
     {

packages/atomic-block/src/AtomicBlock.js

@@ -2,7 +2,6 @@
 
 import React, { Component } from 'react'
 import type { Node } from 'react'
-import styles from './styles.css'
 
 type Props = {
   onClick: (event: SyntheticMouseEvent<*>) => void,
@@ -12,14 +11,8 @@ type Props = {
 
 export default class AtomicBlock extends Component<Props> {
   render() {
-    const { onClick, children, isFocused } = this.props
-    const classNames = []
-    if (isFocused) classNames.push(styles.focused)
+    const { onClick, children } = this.props
 
-    return (
-      <div className={classNames} onClick={onClick}>
-        {children}
-      </div>
-    )
+    return <div onClick={onClick}>{children}</div>
   }
 }

packages/atomic-block/src/index.js

@@ -1,13 +1,13 @@
 // @flow
 
 import React, { Component } from 'react'
-import { withPluginContext } from '@djsp/core'
+import { withPluginContext, constants } from '@djsp/core'
 import type { PluginProps } from '@djsp/core'
-import Draft from 'draft-js'
+import { ContentBlock, EditorState, Modifier, SelectionState } from 'draft-js'
+import { insertNewLine } from '@djsp/utils'
+import DraftOffsetKey from 'draft-js/lib/DraftOffsetKey'
 import AtomicBlock from './AtomicBlock'
 
-const { EditorState } = Draft
-
 type Props = PluginProps & {
   type: string,
   children: any,
@@ -17,6 +17,38 @@ type State = {
   isFocused: boolean,
 }
 
+// Set selection of editor to next/previous block
+const setSelection = (
+  editorState: EditorState,
+  setEditorState: EditorState,
+  newActiveBlock: ContentBlock
+): void => {
+  // TODO verify that always a key-0-0 exists
+  const offsetKey = DraftOffsetKey.encode(newActiveBlock.getKey(), 0, 0)
+  const node = document.querySelectorAll(`[data-offset-key="${offsetKey}"]`)[0]
+  // set the native selection to the node so the caret is not in the text and
+  // the selectionState matches the native selection
+  const selection = window.getSelection()
+  const range = document.createRange()
+  range.setStart(node, 0)
+  range.setEnd(node, 0)
+  selection.removeAllRanges()
+  selection.addRange(range)
+
+  setEditorState(
+    EditorState.forceSelection(
+      editorState,
+      new SelectionState({
+        anchorKey: newActiveBlock.getKey(),
+        anchorOffset: 0,
+        focusKey: newActiveBlock.getKey(),
+        focusOffset: 0,
+        isBackward: false,
+      })
+    )
+  )
+}
+
 class AtomicBlockPlugin extends Component<Props, State> {
   unregister: () => void
 
@@ -26,38 +58,90 @@ class AtomicBlockPlugin extends Component<Props, State> {
     const { registerPlugin } = this.props
 
     this.unregister = registerPlugin({
-      keyBindingFn: this.keyBindingFn,
       blockRendererFn: this.blockRendererFn,
+      handleReturn: this.handleReturn,
+      handleKeyCommand: this.handleKeyCommand,
     })
   }
 
   componentWillUnmount() {
     this.unregister()
   }
 
-  focusBlock = (blockKey: string) => {
-    const { setEditorState, editorState } = this.props
+  handleKeyCommand = (command, editorState) => {
+    const { setEditorState } = this.props
 
-    let selection = editorState.getSelection()
+    let contentState = editorState.getCurrentContent()
+    const selection = editorState.getSelection()
+    const key = selection.getStartKey()
+    const currentBlock = contentState.getBlockForKey(key)
+    const previousBlock = contentState.getBlockBefore(key)
+
+    if (!selection.isCollapsed()) {
+      return constants.NOT_HANDLED
+    } else if (
+      currentBlock.getType() !== 'atomic' &&
+      previousBlock != null &&
+      selection.getStartOffset() === 0 &&
+      previousBlock.getType() === 'atomic' &&
+      command === 'backspace'
+    ) {
+      setSelection(editorState, setEditorState, previousBlock)
+      return constants.HANDLED
+    } else if (
+      currentBlock.getType() === 'atomic' &&
+      ['backspace', 'delete'].includes(command)
+    ) {
+      contentState = Modifier.removeRange(
+        contentState,
+        editorState.getSelection().merge({
+          anchorOffset: 0,
+          focusOffset: 1,
+        }),
+        null
+      )
+
+      setEditorState(
+        EditorState.push(
+          editorState,
+          Modifier.setBlockType(contentState, selection, 'unstyled')
+        )
+      )
+      return constants.HANDLED
+    }
 
-    selection = selection.merge({
-      anchorKey: blockKey,
-      anchorOffset: 0,
-      focusKey: blockKey,
-      focusOffset: 0,
-    })
+    return constants.NOT_HANDLED
+  }
 
-    window.getSelection().removeAllRanges()
+  focusBlock = (blockKey: string) => {
+    const { setEditorState, editorState } = this.props
+    const block = editorState.getCurrentContent().getBlockForKey(blockKey)
 
-    setEditorState(EditorState.forceSelection(editorState, selection))
+    setSelection(editorState, setEditorState, block)
   }
 
-  keyBindingFn = (event: SyntheticKeyboardEvent<*>) => {
-    console.log('event.key', event.key)
+  deleteAtomicBlock = (key: string) => {
+    const { editorState, setEditorState } = this.props
+    const selection = editorState.getSelection()
+
+    setEditorState(
+      EditorState.push(
+        editorState,
+        Modifier.removeRange(
+          editorState.getCurrentContent(),
+          selection.merge({
+            anchorKey: key,
+            focusKey: key,
+            anchorOffset: 0,
+            focusOffset: 1,
+          })
+        )
+      )
+    )
   }
 
   renderChildren = (props: Object) => {
-    const { editorState } = this.props
+    const { editorState, setEditorState } = this.props
 
     const blockKey = props.block.getKey()
     const selection = editorState.getSelection()
@@ -66,13 +150,21 @@ class AtomicBlockPlugin extends Component<Props, State> {
 
     return (
       <AtomicBlock
+        onDeleteBlock={() => this.deleteAtomicBlock(blockKey)}
+        setEditorState={setEditorState}
         isFocused={isFocused}
         onClick={() => this.focusBlock(blockKey)}>
-        {this.props.children(props)}
+        {this.props.children({ ...props, isFocused })}
       </AtomicBlock>
     )
   }
 
+  handleReturn = (event, editorState) => {
+    const { setEditorState } = this.props
+
+    setEditorState(insertNewLine(editorState))
+  }
+
   blockRendererFn = block => {
     const { type, editorState } = this.props
     const content = editorState.getCurrentContent()

packages/core/README.md

@@ -8,3 +8,63 @@
 ## License
 
 MIT © [juliankrispel](https://github.com/juliankrispel)
+
+
+## API
+
+### <Plugin />
+
+```jsx
+import { Plugin } from '@djsp/core' }
+```
+
+#### Props
+A plugin inherits the same props as as the [Draft js Editor](https://draftjs.org/docs/api-reference-editor) including a few exceptions. Here's the full list of props:
+```jsx
+export type PluginProps = {
+  blockRendererFn: (block: BlockNodeRecord) => ?Object,
+  blockStyleFn: (block: BlockNodeRecord) => string,
+  keyBindingFn: (e: SyntheticKeyboardEvent<>) => ?string,
+  handleReturn?: (
+    e: SyntheticKeyboardEvent<>,
+    editorState: EditorState,
+  ) => DraftHandleValue,
+  handleKeyCommand?: (
+    command: DraftEditorCommand | string,
+    editorState: EditorState,
+    eventTimeStamp: number,
+  ) => DraftHandleValue,
+  handleBeforeInput?: (
+    chars: string,
+    editorState: EditorState,
+    eventTimeStamp: number,
+  ) => DraftHandleValue,
+  handlePastedText?: (
+    text: string,
+    html?: string,
+    editorState: EditorState,
+  ) => DraftHandleValue,
+  handlePastedFiles?: (files: Array<Blob>) => DraftHandleValue,
+  handleDroppedFiles?: (
+    selection: SelectionState,
+    files: Array<Blob>,
+  ) => DraftHandleValue,
+  handleDrop?: (
+    selection: SelectionState,
+    dataTransfer: Object,
+    isInternal: DraftDragType,
+  ) => DraftHandleValue,
+  onEscape?: (e: SyntheticKeyboardEvent<>) => void,
+  onTab?: (e: SyntheticKeyboardEvent<>) => void,
+  onUpArrow?: (e: SyntheticKeyboardEvent<>) => void,
+  onRightArrow?: (e: SyntheticKeyboardEvent<>) => void,
+  onDownArrow?: (e: SyntheticKeyboardEvent<>) => void,
+  onLeftArrow?: (e: SyntheticKeyboardEvent<>) => void,
+  onBlur?: (e: SyntheticEvent<>) => void,
+  onFocus?: (e: SyntheticEvent<>) => void,
+  customStyleMap?: Object,
+  customStyleFn?: (style: DraftInlineStyle, block: BlockNodeRecord) => ?Object,
+  blockRenderMap: DraftBlockRenderMap,
+};
+```
+

packages/core/flow-lib/draft-js/DraftEntityInstance.js.flow

@@ -1,55 +1,11 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule DraftEntityInstance
- * @legacyServerCallableInstance
- * @format
- * @flow
- */
-
-'use strict';
-
-import type { DraftEntityMutability } from './DraftEntityMutability';
-import type { DraftEntityType } from './DraftEntityType';
-
-var Immutable = require('immutable');
-
-var { Record } = Immutable;
-
-var DraftEntityInstanceRecord = Record({
-  type: 'TOKEN',
-  mutability: 'IMMUTABLE',
-  data: Object
-});
-
-/**
- * An instance of a document entity, consisting of a `type` and relevant
- * `data`, metadata about the entity.
- *
- * For instance, a "link" entity might provide a URI, and a "mention"
- * entity might provide the mentioned user's ID. These pieces of data
- * may be used when rendering the entity as part of a ContentBlock DOM
- * representation. For a link, the data would be used as an href for
- * the rendered anchor. For a mention, the ID could be used to retrieve
- * a hovercard.
- */
-class DraftEntityInstance extends DraftEntityInstanceRecord {
-  getType(): DraftEntityType {
-    return this.get('type');
-  }
-
-  getMutability(): DraftEntityMutability {
-    return this.get('mutability');
-  }
-
-  getData(): Object {
-    return this.get('data');
+// @flow
+import type { DraftEntityMutability } from './DraftEntityMutability'
+import type { DraftEntityType } from './DraftEntityType'
+
+declare module 'draft-js/lib/DraftEntityInstance' {
+  declare export default class DraftEntityInstance {
+    getType(): DraftEntityType;
+    getMutability(): DraftEntityMutability;
+    getData(): Object;
   }
 }
-
-export default DraftEntityInstance;

packages/core/flow-lib/draft-js/DraftOffsetKey.js.flow

@@ -32,4 +32,16 @@ var DraftOffsetKey = {
   }
 };
 
-export default DraftOffsetKey;
+
+declare module 'draft-js/lib/DraftOffsetKey' {
+  declare type DraftOffsetKey = {
+    encode: (
+      blockKey: string,
+      decoratorKey: number,
+      leafKey: number
+    ) =>  string,
+    decode: (offsetKey: string) => DraftOffsetKeyPath,
+  }
+
+  declare export default DraftOffsetKey
+}