Desktop: Resolves #160: Add word counter feature to notes (#2444)

* Add word counter logic

Fix errant whitespace changes

* update to using react hooks
Use React hooks
remove extra theme set
Update styling function

* correct linting and package lock issues

* WIP: update button functionality

* Add line count and update styling from feedback

* corrected file location to fit new build

Author: jdrobertso

.eslintignore

@@ -53,6 +53,7 @@ ReactNativeClient/lib/joplin-renderer/assets/
 ReactNativeClient/lib/rnInjectedJs/
 
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
+ElectronClient/gui/NoteContentPropertiesDialog.js
 ElectronClient/gui/ResourceScreen.js
 ElectronClient/gui/ShareNoteDialog.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js

.gitignore

@@ -47,6 +47,7 @@ Tools/commit_hook.txt
 *.map
 
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
+ElectronClient/gui/NoteContentPropertiesDialog.js
 ElectronClient/gui/ResourceScreen.js
 ElectronClient/gui/ShareNoteDialog.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js

CliClient/package-lock.json

@@ -5,6 +5,7 @@ const { SideBar } = require('./SideBar.min.js');
 const { NoteList } = require('./NoteList.min.js');
 const { NoteText } = require('./NoteText.min.js');
 const { PromptDialog } = require('./PromptDialog.min.js');
+const NoteContentPropertiesDialog = require('./NoteContentPropertiesDialog.js').default;
 const NotePropertiesDialog = require('./NotePropertiesDialog.min.js');
 const ShareNoteDialog = require('./ShareNoteDialog.js').default;
 const Setting = require('lib/models/Setting.js');
@@ -25,6 +26,7 @@ class MainScreenComponent extends React.Component {
 		super();
 
 		this.notePropertiesDialog_close = this.notePropertiesDialog_close.bind(this);
+		this.noteContentPropertiesDialog_close = this.noteContentPropertiesDialog_close.bind(this);
 		this.shareNoteDialog_close = this.shareNoteDialog_close.bind(this);
 		this.sidebar_onDrag = this.sidebar_onDrag.bind(this);
 		this.noteList_onDrag = this.noteList_onDrag.bind(this);
@@ -42,6 +44,10 @@ class MainScreenComponent extends React.Component {
 		this.setState({ notePropertiesDialogOptions: {} });
 	}
 
+	noteContentPropertiesDialog_close() {
+		this.setState({ noteContentPropertiesDialogOptions: {} });
+	}
+
 	shareNoteDialog_close() {
 		this.setState({ shareNoteDialogOptions: {} });
 	}
@@ -54,6 +60,7 @@ class MainScreenComponent extends React.Component {
 				message: '',
 			},
 			notePropertiesDialogOptions: {},
+			noteContentPropertiesDialogOptions: {},
 			shareNoteDialogOptions: {},
 		});
 	}
@@ -274,6 +281,14 @@ class MainScreenComponent extends React.Component {
 					onRevisionLinkClick: command.onRevisionLinkClick,
 				},
 			});
+		} else if (command.name === 'commandContentProperties') {
+			this.setState({
+				noteContentPropertiesDialogOptions: {
+					visible: true,
+					text: command.text,
+					lines: command.lines,
+				},
+			});
 		} else if (command.name === 'commandShareNoteDialog') {
 			this.setState({
 				shareNoteDialogOptions: {
@@ -609,13 +624,15 @@ class MainScreenComponent extends React.Component {
 		const modalLayerStyle = Object.assign({}, styles.modalLayer, { display: this.state.modalLayer.visible ? 'block' : 'none' });
 
 		const notePropertiesDialogOptions = this.state.notePropertiesDialogOptions;
+		const noteContentPropertiesDialogOptions = this.state.noteContentPropertiesDialogOptions;
 		const shareNoteDialogOptions = this.state.shareNoteDialogOptions;
 		const keyboardMode = Setting.value('editor.keyboardMode');
 
 		return (
 			<div style={style}>
 				<div style={modalLayerStyle}>{this.state.modalLayer.message}</div>
 
+				{noteContentPropertiesDialogOptions.visible && <NoteContentPropertiesDialog theme={this.props.theme} onClose={this.noteContentPropertiesDialog_close} text={noteContentPropertiesDialogOptions.text} lines={noteContentPropertiesDialogOptions.lines}/>}
 				{notePropertiesDialogOptions.visible && <NotePropertiesDialog theme={this.props.theme} noteId={notePropertiesDialogOptions.noteId} onClose={this.notePropertiesDialog_close} onRevisionLinkClick={notePropertiesDialogOptions.onRevisionLinkClick} />}
 				{shareNoteDialogOptions.visible && <ShareNoteDialog theme={this.props.theme} noteIds={shareNoteDialogOptions.noteIds} onClose={this.shareNoteDialog_close} />}
 

ElectronClient/gui/MainScreen.jsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+const { _ } = require('lib/locale.js');
+const { themeStyle } = require('../theme.js');
+const DialogButtonRow = require('./DialogButtonRow.min');
+const Countable = require('countable');
+
+interface NoteContentPropertiesDialogProps {
+	theme: number,
+	text: string,
+	onClose: Function,
+}
+
+interface TextPropertiesMap {
+	[key: string]: number;
+}
+
+interface KeyToLabelMap {
+	[key: string]: string;
+}
+
+export default function NoteContentPropertiesDialog(props:NoteContentPropertiesDialogProps) {
+	const theme = themeStyle(props.theme);
+	const textComps: JSX.Element[] = [];
+	const [lines, setLines] = useState<number>(0);
+	const [words, setWords] = useState<number>(0);
+	const [characters, setCharacters] = useState<number>(0);
+	const [charactersNoSpace, setCharactersNoSpace] = useState<number>(0);
+
+	useEffect(() => {
+		Countable.count(props.text, (counter: { words: number; all: number; characters: number; }) => {
+			setWords(counter.words);
+			setCharacters(counter.all);
+			setCharactersNoSpace(counter.characters);
+		});
+		setLines(props.text.split('\n').length);
+	}, []);
+
+	const textProperties: TextPropertiesMap = {
+		lines: lines,
+		words: words,
+		characters: characters,
+		charactersNoSpace: charactersNoSpace,
+	};
+
+	const keyToLabel: KeyToLabelMap = {
+		words: _('Words'),
+		characters: _('Characters'),
+		charactersNoSpace: _('Characters excluding spaces'),
+		lines: _('Lines'),
+	};
+
+	const buttonRow_click = () => {
+		props.onClose();
+	};
+
+	const createItemField = (key: string, value: number) => {
+		const labelComp = <label style={Object.assign({}, theme.textStyle, theme.controlBoxLabel)}>{keyToLabel[key]}</label>;
+		const controlComp = <div style={Object.assign({}, theme.textStyle, theme.controlBoxValue)}>{value}</div>;
+
+		return (
+			<div key={key} style={theme.controlBox} className="note-text-property-box">{labelComp}{controlComp}</div>
+		);
+	};
+
+	if (textProperties) {
+		for (let key in textProperties) {
+			if (!textProperties.hasOwnProperty(key)) continue;
+			const comp = createItemField(key, textProperties[key]);
+			textComps.push(comp);
+		}
+	}
+
+	return (
+		<div style={theme.dialogModalLayer}>
+			<div style={theme.dialogBox}>
+				<div style={theme.dialogTitle}>{_('Content properties')}</div>
+				<div>{textComps}</div>
+				<DialogButtonRow theme={props.theme} onClick={buttonRow_click} okButtonShow={false} cancelButtonLabel={_('Close')}/>
+			</div>
+		</div>
+	);
+}

ElectronClient/gui/NoteContentPropertiesDialog.tsx

@@ -114,14 +114,6 @@ class NotePropertiesDialog extends React.Component {
 		this.styles_ = {};
 		this.styleKey_ = styleKey;
 
-		this.styles_.controlBox = {
-			marginBottom: '1em',
-			color: 'black', // This will apply for the calendar
-			display: 'flex',
-			flexDirection: 'row',
-			alignItems: 'center',
-		};
-
 		this.styles_.button = {
 			minWidth: theme.buttonMinWidth,
 			minHeight: theme.buttonMinHeight,
@@ -234,7 +226,7 @@ class NotePropertiesDialog extends React.Component {
 	createNoteField(key, value) {
 		const styles = this.styles(this.props.theme);
 		const theme = themeStyle(this.props.theme);
-		const labelComp = <label style={Object.assign({}, theme.textStyle, { marginRight: '1em', width: '6em', display: 'inline-block', fontWeight: 'bold' })}>{this.formatLabel(key)}</label>;
+		const labelComp = <label style={Object.assign({}, theme.textStyle, theme.controlBoxLabel)}>{this.formatLabel(key)}</label>;
 		let controlComp = null;
 		let editComp = null;
 		let editCompHandler = null;
@@ -315,7 +307,7 @@ class NotePropertiesDialog extends React.Component {
 					</a>
 				);
 			} else {
-				controlComp = <div style={Object.assign({}, theme.textStyle, { display: 'inline-block' })}>{displayedValue}</div>;
+				controlComp = <div style={Object.assign({}, theme.textStyle, theme.controlBoxValue)}>{displayedValue}</div>;
 			}
 
 			if (['id', 'revisionsLink', 'markup_language'].indexOf(key) < 0) {
@@ -335,7 +327,7 @@ class NotePropertiesDialog extends React.Component {
 		}
 
 		return (
-			<div key={key} style={this.styles_.controlBox} className="note-property-box">
+			<div key={key} style={theme.controlBox} className="note-property-box">
 				{labelComp}
 				{controlComp}
 				{editComp}

ElectronClient/gui/NotePropertiesDialog.jsx

@@ -1817,6 +1817,18 @@ class NoteTextComponent extends React.Component {
 			},
 		});
 
+		toolbarItems.push({
+			tooltip: _('Content Properties'),
+			iconName: 'fa-sticky-note',
+			onClick: () => {
+				this.props.dispatch({
+					type: 'WINDOW_COMMAND',
+					name: 'commandContentProperties',
+					text: this.state.note.body,
+				});
+			},
+		});
+
 		return toolbarItems;
 	}