optimize counter-example and fix lint error

Author: freedomlang

examples/counter/README.md renamed to examples/couter-example/README.md

@@ -1,12 +1,12 @@
 {
   "name": "@djsp/counter-example",
-  "homepage": "https://github.com/draft-js-plugins/next",
-  "version": "0.0.1",
+  "homepage": "https://github.com/draft-js-plugins/next#readme",
+  "version": "0.1.5",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@djsp/utils": "latest",
-    "@djsp/editor": "latest",
+    "@djsp/utils": "^0.1.5",
+    "@djsp/editor": "^0.1.5",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-scripts": "^1.1.1"

examples/counter/package.json renamed to examples/couter-example/package.json

@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react'
+import { Plugin } from '@djsp/editor'
+import { getCharCount, getWordCount, getLineCount } from '@djsp/utils'
+
+export default function WordCountPlugin() {
+  return (
+    <Plugin>
+      {({ editorState }) => (
+        <Fragment>
+          <div>Char count: {getCharCount(editorState)}</div>
+          <div>Word count: {getWordCount(editorState)}</div>
+          <div>Line count: {getLineCount(editorState)}</div>
+        </Fragment>
+      )}
+    </Plugin>
+  )
+}

examples/counter/public/index.html renamed to examples/couter-example/public/index.html

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 
 import { EditorState, ContentState } from 'draft-js'
 import { EditorContainer, Editor } from '@djsp/editor'
-import { getCharCount, getWordCount, getLineCount } from '@djsp/utils'
+import WordCountPlugin from './WordCountPlugin'
 import './styles.css'
 
 class App extends Component {
@@ -21,9 +21,7 @@ class App extends Component {
         <EditorContainer
           editorState={this.state.editorState}
           onChange={this.onChange}>
-          <div>Char count: {getCharCount(this.state.editorState)}</div>
-          <div>Word count: {getWordCount(this.state.editorState)}</div>
-          <div>Line count: {getLineCount(this.state.editorState)}</div>
+          <WordCountPlugin />
           <Editor />
         </EditorContainer>
       </div>

examples/couter-example/src/WordCountPlugin.js

@@ -125,6 +125,24 @@ hasEntity(
 insertNewLine(editorState: EditorState): EditorState
 ```
 
+### getCharCount
+
+```javascript
+getCharCount(editorState: EditorState): number
+```
+
+### getLineCount
+
+```javascript
+getLineCount(editorState: EditorState): number
+```
+
+### getWordCount
+
+```javascript
+getWordCount(editorState: EditorState): number
+```
+
 ## License
 
 MIT © [juliankrispel](https://github.com/juliankrispel)

examples/counter/src/index.js renamed to examples/couter-example/src/index.js

@@ -14,6 +14,7 @@ import {
 } from 'draft-js'
 import type DraftEntityInstance from 'draft-js/lib/DraftEntityInstance'
 import type { DraftDecorator } from 'draft-js/lib/DraftDecorator'
+// eslint-disable-next-line node/no-deprecated-api
 import punycode from 'punycode'
 
 export function replaceWithAtomicBlock(