From 14ee631ffc1415e2e26493fce2f8640b4f368520 Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Tue, 15 Jun 2021 08:21:11 -0700
Subject: [PATCH] Handle focusing on the editor line ourselves :shrug:; fixes
#39
---
.eslintrc | 4 +++-
src/TextEditor.js | 15 ++++++++++++++-
2 files changed, 17 insertions(+), 2 deletions(-)
diff --git a/.eslintrc b/.eslintrc
index b3caa59..be00502 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -26,6 +26,8 @@
"sort-keys": ["error", "asc", {
"caseSensitive": false,
"natural": false
- }]
+ }],
+ "jsx-a11y/click-events-have-key-events": "off",
+ "jsx-a11y/no-static-element-interactions": "off"
}
}
diff --git a/src/TextEditor.js b/src/TextEditor.js
index 536ba33..4ad4215 100644
--- a/src/TextEditor.js
+++ b/src/TextEditor.js
@@ -20,6 +20,16 @@ class TextEditor extends Component {
this.onChange = this.onChange.bind(this);
this.handleKeyCommand = this.handleKeyCommand.bind(this);
this.handleFormating = this.handleFormating.bind(this);
+ this.handleFocus = this.handleFocus.bind(this);
+ this.editorRef = React.createRef();
+ }
+
+ /**
+ * This is a kinda silly hack (but apparently recommended approach) to
+ * making sure the whole visible editor area, not just the first line.
+ */
+ handleFocus() {
+ if (this.editorRef.current) this.editorRef.current.focus();
}
/** */
@@ -58,6 +68,7 @@ class TextEditor extends Component {
const { classes } = this.props;
const { editorState } = this.state;
const currentStyle = editorState.getCurrentInlineStyle();
+
return (
<div>
<ToggleButtonGroup
@@ -77,11 +88,13 @@ class TextEditor extends Component {
<ItalicIcon />
</ToggleButton>
</ToggleButtonGroup>
- <div className={classes.editorRoot}>
+
+ <div className={classes.editorRoot} onClick={this.handleFocus}>
<Editor
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
+ ref={this.editorRef}
/>
</div>
</div>
--
GitLab