Merge pull request #21 from draft-js-plugins/counter

juliankrispel · web-flow · commit fedec94f2fe3 · 2018-11-28T14:57:21.000-08:00
feat: add a few function to utils for count
diff --git a/examples/counter/README.md b/examples/counter/README.md
diff --git a/examples/counter/package-lock.json b/examples/counter/package-lock.json
diff --git a/examples/counter/package.json b/examples/counter/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@djsp/counter-example",
+  "homepage": "https://github.com/draft-js-plugins/next#readme",
+  "version": "0.1.5",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@djsp/utils": "^0.1.5",
+    "@djsp/core": "^0.1.5",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-scripts": "^1.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/examples/counter/public/index.html b/examples/counter/public/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+
+    <title>@djsp/suggestions</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/counter/src/WordCountPlugin.js b/examples/counter/src/WordCountPlugin.js
@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react'
+import { Plugin } from '@djsp/core'
+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>
+  )
+}
diff --git a/examples/counter/src/index.js b/examples/counter/src/index.js
@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+import { EditorState, ContentState } from 'draft-js'
+import { EditorContainer, Editor } from '@djsp/core'
+import WordCountPlugin from './WordCountPlugin'
+import './styles.css'
+
+class App extends Component {
+  state = {
+    editorState: EditorState.createWithContent(
+      ContentState.createFromText('Just type!')
+    ),
+  }
+
+  onChange = editorState => this.setState({ editorState })
+
+  render() {
+    return (
+      <div>
+        <EditorContainer
+          editorState={this.state.editorState}
+          onChange={this.onChange}>
+          <WordCountPlugin />
+          <Editor />
+        </EditorContainer>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/examples/counter/src/styles.css b/examples/counter/src/styles.css
@@ -0,0 +1,14 @@
+body {
+  font-family: sans-serif;
+  font-size: 1.8em;
+  padding: 1em;
+  background: #12312e;
+}
+
+.public-DraftEditor-content {
+  padding: 2em;
+  border-radius: 5px;
+  color: #fff;
+  border: #555;
+  background: #244a46;
+}
diff --git a/packages/utils/README.md b/packages/utils/README.md
@@ -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)
diff --git a/packages/utils/package-lock.json b/packages/utils/package-lock.json
diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -36,6 +36,7 @@
     "dist"
   ],
   "dependencies": {
-    "draft-js": "^0.10.5"
+    "draft-js": "^0.10.5",
+    "punycode": "^2.1.1"
   }
 }
diff --git a/packages/utils/src/index.js b/packages/utils/src/index.js
@@ -14,6 +14,8 @@ 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(
   editorState: EditorState,
@@ -243,3 +245,24 @@ export function insertNewLine(editorState: EditorState): EditorState {
   })
   return EditorState.push(editorState, newContent, 'insert-fragment')
 }
+
+export function getCharCount(editorState: EditorState): number {
+  const decodeUnicode = str => punycode.ucs2.decode(str) // func to handle unicode characters
+  const plainText = editorState.getCurrentContent().getPlainText('')
+  const regex = /(?:\r\n|\r|\n)/g // new line, carriage return, line feed
+  const cleanString = plainText.replace(regex, '').trim() // replace above characters w/ nothing
+  return decodeUnicode(cleanString).length
+}
+
+export function getLineCount(editorState: EditorState): number {
+  const blockArray = editorState.getCurrentContent().getBlocksAsArray()
+  return blockArray ? blockArray.length : 0
+}
+
+export function getWordCount(editorState: EditorState): number {
+  const plainText = editorState.getCurrentContent().getPlainText('')
+  const regex = /(?:\r\n|\r|\n)/g // new line, carriage return, line feed
+  const cleanString = plainText.replace(regex, ' ').trim() // replace above characters w/ space
+  const wordArray = cleanString.match(/\S+/g) // matches words according to whitespace
+  return wordArray ? wordArray.length : 0
+}

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,7 @@`
`36`	`36`	`"dist"`
`37`	`37`	`],`
`38`	`38`	`"dependencies": {`
`39`		`- "draft-js": "^0.10.5"`
	`39`	`+ "draft-js": "^0.10.5",`
	`40`	`+ "punycode": "^2.1.1"`
`40`	`41`	`}`
`41`	`42`	`}`