Add ability to override DefaultPlaceholder component

Author: simsim0709

draft-js-placeholder-plugin/README.md

@@ -1,3 +1,22 @@
-# DraftJS Divider Plugin
+# DraftJS placeholder Plugin
 
 *This is a plugin for the `draft-js-plugins-editor`.*
+
+## Usage
+
+```js
+import createPlaceholderPlugin from 'draft-js-placeholder-plugin';
+
+const placeholderPlugin = createPlaceholderPlugin();
+
+```
+
+## Default Config
+
+```js
+{
+  dataKey = 'placeholder',
+  component = DefaultPlaceholder,
+}
+
+```

draft-js-placeholder-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-js-placeholder-plugin",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Placeholder Plugin for DraftJS",
   "author": {
     "name": "Ilkwon Sim",

draft-js-placeholder-plugin/src/index.js

@@ -2,14 +2,16 @@ import { EditorState } from 'draft-js';
 
 import DefaultPlaceholder from './components/DefaultPlaceholder';
 
-const placeholderPlugin = ({ dataKey = 'placeholder' } = {}) => {
+const placeholderPlugin = (
+  { dataKey = 'placeholder', component = DefaultPlaceholder } = {}
+) => {
   return {
     blockRendererFn: block => {
       const placeholder = block.getData().get(dataKey);
 
       if (placeholder) {
         return {
-          component: DefaultPlaceholder,
+          component,
           props: {
             placeholder,
           },

draft-js-placeholder-plugin/src/modifiers/addPlaceholder.js

@@ -0,0 +1,25 @@
+const addPlaceholder = editorState => {
+  const contentState = editorState.getCurrentContent();
+  const selectionState = editorState.getSelection();
+  const currentBlock = getCurrentBlock(editorState);
+
+  if (isEmptyBlock(currentBlock)) {
+    const newContentState = Modifier.setBlockData(
+      contentState,
+      selectionState,
+      {
+        placeholder: 'This is placeholder',
+      }
+    );
+
+    setEditorState(
+      EditorState.push(editorState, newContentState, 'change-block-data')
+    );
+    // setEditorState(RichUtils.toggleBlockType(editorState, 'placeholder'));
+    // setEditorState(
+    //   Modifier.insertText(contentState, selectionState, 'attach youtube')
+    // );
+  }
+};
+
+export default addPlaceholder;