Add option for disabling spellcheck (#87)

src/main/i18n/translations/de.ts

@@ -79,6 +79,7 @@ const translationsDe: Partial<Translations> = {
 	"allow-future-entries": "Einträge in der Zukunft erlauben",
 	auto: "Automatisch",
 	"diary-entries": "Tagebucheinträge",
+	"enable-spellcheck": "Rechtschreibprüfung aktivieren",
 	"first-day-of-week": "Erster Wochentag",
 	"hide-titles": "Titel ausblenden",
 	no: "Nein",

src/main/i18n/translations/en.ts

@@ -79,6 +79,7 @@ const translationsEn: Translations = {
 	"allow-future-entries": "Allow entries in the future",
 	auto: "Auto",
 	"diary-entries": "Diary entries",
+	"enable-spellcheck": "Check spelling",
 	"first-day-of-week": "First day of the week",
 	"hide-titles": "Hide titles",
 	no: "No",

src/renderer/components/elements/editor/editor/Editor.tsx

@@ -31,6 +31,7 @@ const listPlugin = createListPlugin();
 const plugins = [listPlugin];
 
 export interface StateProps {
+	enableSpellcheck: boolean;
 	hideTitles: boolean;
 	dateSelected: Moment;
 	entries: Entries;
@@ -164,7 +165,7 @@ export default class Editor extends PureComponent<Props, State> {
 
 	render = (): ReactNode => {
 		const { dateSelected, textEditorState, titleEditorState } = this.state;
-		const { hideTitles } = this.props;
+		const { enableSpellcheck, hideTitles } = this.props;
 
 		// Detect active inline/block styles
 		const blockType = RichUtils.getCurrentBlockType(textEditorState);
@@ -185,7 +186,7 @@ export default class Editor extends PureComponent<Props, State> {
 								onBlur={this.saveEntry}
 								onChange={this.onTitleChange}
 								placeholder={translations["add-a-title"]}
-								spellCheck
+								spellCheck={enableSpellcheck}
 							/>
 						</div>
 					)}
@@ -200,7 +201,7 @@ export default class Editor extends PureComponent<Props, State> {
 							}}
 							placeholder={isOl || isUl ? "" : `${translations["write-something"]}…`}
 							plugins={plugins}
-							spellCheck
+							spellCheck={enableSpellcheck}
 						/>
 					</div>
 				</div>

src/renderer/components/elements/editor/editor/EditorContainer.tsx

@@ -6,6 +6,7 @@ import { IndexDate } from "../../../../types";
 import Editor, { DispatchProps, StateProps } from "./Editor";
 
 const mapStateToProps = (state: RootState): StateProps => ({
+	enableSpellcheck: state.app.enableSpellcheck,
 	hideTitles: state.app.hideTitles,
 	dateSelected: state.diary.dateSelected,
 	entries: state.file.entries,

src/renderer/components/overlays/pref-overlay/entries-pref/EntriesPref.tsx

@@ -3,6 +3,7 @@ import React, { ReactElement } from "react";
 import { translations } from "../../../../utils/i18n";
 import FutureEntriesPrefContainer from "./future-entries-pref/FutureEntriesPrefContainer";
 import HideTitlesPrefContainer from "./hide-titles-pref/HideTitlesPrefContainer";
+import SpellcheckPrefContainer from "./spellcheck-pref/SpellcheckPrefContainer";
 
 /**
  * Preference fieldset for options related to diary entries
@@ -15,6 +16,8 @@ export default function EntriesPref(): ReactElement {
 				<HideTitlesPrefContainer />
 				<br />
 				<FutureEntriesPrefContainer />
+				<br />
+				<SpellcheckPrefContainer />
 			</div>
 		</fieldset>
 	);

src/renderer/components/overlays/pref-overlay/entries-pref/spellcheck-pref/SpellcheckPref.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from "react";
+
+import { translations } from "../../../../../utils/i18n";
+
+export interface StateProps {
+	enableSpellcheck: boolean;
+}
+
+export interface DispatchProps {
+	updateSpellcheckPref: (enableSpellcheck: boolean) => void;
+}
+
+type Props = StateProps & DispatchProps;
+
+/**
+ * Preference fieldset for enabling or disabling spellcheck
+ */
+export default function SpellcheckPref(props: Props): ReactElement {
+	const { enableSpellcheck, updateSpellcheckPref } = props;
+
+	const toggleEnableSpellcheck = (): void => updateSpellcheckPref(!enableSpellcheck);
+
+	return (
+		<label htmlFor="checkbox-spellcheck">
+			<input
+				type="checkbox"
+				name="checkbox-spellcheck"
+				id="checkbox-spellcheck"
+				checked={enableSpellcheck}
+				onChange={toggleEnableSpellcheck}
+			/>
+			{translations["enable-spellcheck"]}
+		</label>
+	);
+}

src/renderer/components/overlays/pref-overlay/entries-pref/spellcheck-pref/SpellcheckPrefContainer.tsx

@@ -0,0 +1,16 @@
+import { connect } from "react-redux";
+
+import { updateSpellcheckPref } from "../../../../../store/app/actionCreators";
+import { RootState, ThunkDispatchT } from "../../../../../store/store";
+import SpellcheckPref, { DispatchProps, StateProps } from "./SpellcheckPref";
+
+const mapStateToProps = (state: RootState): StateProps => ({
+	enableSpellcheck: state.app.enableSpellcheck,
+});
+
+const mapDispatchToProps = (dispatch: ThunkDispatchT): DispatchProps => ({
+	updateSpellcheckPref: (enableSpellcheck: boolean): void =>
+		dispatch(updateSpellcheckPref(enableSpellcheck)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SpellcheckPref);

src/renderer/files/preferences/preferences.ts

@@ -9,6 +9,7 @@ import { supportsNativeTheme } from "../../utils/native-theme";
 const DEFAULT_ALLOW_FUTURE_ENTRIES = false;
 const DEFAULT_FIRST_DAY_OF_WEEK = null; // Let the system locale determine the first day of the week
 const DEFAULT_HIDE_TITLES = false;
+const DEFAULT_ENABLE_SPELLCHECK = true;
 const DEFAULT_THEME_PREF: ThemePref = "light";
 const PREF_DIR = remote.app.getPath("userData");
 
@@ -97,6 +98,22 @@ export function saveHideTitlesPref(hideTitles: boolean): void {
 	setPref("hideTitles", hideTitles);
 }
 
+// Spellcheck
+
+/**
+ * Return the preference for whether spellcheck should be enabled/disabled
+ */
+export function loadSpellcheckPref(): boolean {
+	return getPref("enableSpellcheck", DEFAULT_ENABLE_SPELLCHECK);
+}
+
+/**
+ * Update the preference for enabling/disabling spellcheck
+ */
+export function saveSpellcheckPref(enableSpellcheck: boolean): void {
+	setPref("enableSpellcheck", enableSpellcheck);
+}
+
 // Theme
 
 /**

src/renderer/store/app/actionCreators.ts

@@ -4,18 +4,21 @@ import {
 	saveFutureEntriesPref,
 	saveHideTitlesPref,
 	saveThemePref,
+	saveSpellcheckPref,
 } from "../../files/preferences/preferences";
 import { Weekday, Theme, ThemePref } from "../../types";
 import { getThemeFromPref } from "../../utils/native-theme";
 import { ThunkActionT } from "../store";
 import {
 	SET_ALLOW_FUTURE_ENTRIES,
+	SET_ENABLE_SPELLCHECK,
 	SET_HIDE_TITLES,
 	SET_FIRST_DAY_OF_WEEK,
 	SET_OVERLAY,
 	SET_THEME,
 	SET_THEME_PREF,
 	SetAllowFutureEntriesAction,
+	SetEnableSpellcheckAction,
 	SetFirstDayOfWeekAction,
 	SetOverlayAction,
 	SetThemeAction,
@@ -34,6 +37,15 @@ function setAllowFutureEntries(allowFutureEntries: boolean): SetAllowFutureEntri
 	};
 }
 
+function setEnableSpellcheck(enableSpellcheck: boolean): SetEnableSpellcheckAction {
+	return {
+		type: SET_ENABLE_SPELLCHECK,
+		payload: {
+			enableSpellcheck,
+		},
+	};
+}
+
 function setHideTitles(hideTitles: boolean): SetHideTitlesAction {
 	return {
 		type: SET_HIDE_TITLES,
@@ -90,6 +102,13 @@ export function setThemePref(themePref: ThemePref): SetThemePrefAction {
 
 // Thunks
 
+export const updateSpellcheckPref = (enableSpellcheck: boolean): ThunkActionT => (
+	dispatch,
+): void => {
+	dispatch(setEnableSpellcheck(enableSpellcheck));
+	saveSpellcheckPref(enableSpellcheck);
+};
+
 export const updateFutureEntriesPref = (allowFutureEntries: boolean): ThunkActionT => (
 	dispatch,
 ): void => {

src/renderer/store/app/reducer.ts

@@ -1,5 +1,6 @@
 import {
 	loadFirstDayOfWeekPref,
+	loadSpellcheckPref,
 	loadFutureEntriesPref,
 	loadThemePref,
 	loadHideTitlesPref,
@@ -9,6 +10,7 @@ import {
 	AppAction,
 	AppState,
 	SET_ALLOW_FUTURE_ENTRIES,
+	SET_ENABLE_SPELLCHECK,
 	SET_FIRST_DAY_OF_WEEK,
 	SET_OVERLAY,
 	SET_THEME,
@@ -21,6 +23,7 @@ const theme = getThemeFromPref(themePref);
 
 const initialState: AppState = {
 	allowFutureEntries: loadFutureEntriesPref(),
+	enableSpellcheck: loadSpellcheckPref(),
 	firstDayOfWeek: loadFirstDayOfWeekPref(),
 	hideTitles: loadHideTitlesPref(),
 	overlay: "none",
@@ -36,6 +39,12 @@ function appReducer(state = initialState, action: AppAction): AppState {
 				allowFutureEntries: action.payload.allowFutureEntries,
 			};
 		}
+		case SET_ENABLE_SPELLCHECK: {
+			return {
+				...state,
+				enableSpellcheck: action.payload.enableSpellcheck,
+			};
+		}
 		case SET_HIDE_TITLES: {
 			return {
 				...state,

src/renderer/store/app/types.ts

@@ -7,6 +7,7 @@ import { Weekday, Theme, ThemePref } from "../../types";
 
 export interface AppState {
 	allowFutureEntries: boolean;
+	enableSpellcheck: boolean;
 	firstDayOfWeek: Weekday | null;
 	hideTitles: boolean;
 	overlay: OverlayType;
@@ -17,6 +18,7 @@ export interface AppState {
 // Action types
 
 export const SET_ALLOW_FUTURE_ENTRIES = "SET_ALLOW_FUTURE_ENTRIES";
+export const SET_ENABLE_SPELLCHECK = "SET_ENABLE_SPELLCHECK";
 export const SET_FIRST_DAY_OF_WEEK = "SET_FIRST_DAY_OF_WEEK";
 export const SET_HIDE_TITLES = "SET_HIDE_TITLES";
 export const SET_OVERLAY = "SET_OVERLAY";
@@ -32,6 +34,13 @@ export interface SetAllowFutureEntriesAction extends Action {
 	};
 }
 
+export interface SetEnableSpellcheckAction extends Action {
+	type: typeof SET_ENABLE_SPELLCHECK;
+	payload: {
+		enableSpellcheck: boolean;
+	};
+}
+
 export interface SetFirstDayOfWeekAction extends Action {
 	type: typeof SET_FIRST_DAY_OF_WEEK;
 	payload: {
@@ -69,6 +78,7 @@ export interface SetThemePrefAction extends Action {
 
 export type AppAction =
 	| SetAllowFutureEntriesAction
+	| SetEnableSpellcheckAction
 	| SetFirstDayOfWeekAction
 	| SetHideTitlesAction
 	| SetOverlayAction

src/shared/types.ts

@@ -91,6 +91,7 @@ export interface Translations {
 	"allow-future-entries": string;
 	auto: string;
 	"diary-entries": string;
+	"enable-spellcheck": string;
 	"first-day-of-week": string;
 	"hide-titles": string;
 	no: string;