Hello everyone!
My name is Alexander Baltsevich, I work on the leadership position of the Web-team of the Gem4me project. The project is an innovative messenger for everyone and everyone (so far in my fantasies, but we strive for this ;-))
Briefly about the web version stack: ReactJS (who would doubt it) + mobX (personally, I am not at all enthusiastic, but we don’t plan to migrate anywhere; if you are interested in the details, what exactly doesn’t suit you, write comments - maybe I’ll do a separate article about it) + storybook + wdio (screenshot testing).
The messenger is primarily a program for exchanging short messages (and only then all these calls, stickers and other conferences). Messages are basic functionality that should work well. No, not like that: it should work perfectly. And only the one who at least once encountered the development of this functionality knows all the pain that has to be overcome so that everything looks beautiful. We all went through this with the team. And we decided to share.
Requirements
What features should an input field provide?
- It is trite to print text, with the ability to write in several lines (by pressing shift + Enter). Advanced users are also used to using markdown characters to quickly format messages.
- Paste text from the buffer. Often when copying text, the background under this text is also copied (see the example below) and formatting. But clean, neat text and nothing more should get into the input field.
- Insert images from the clipboard. It seems to me that no one can live without this feature.
- Smilies =) have long become a kind of part of the culture of communication. Therefore, you can’t forget about smiles. At the beginning of the text, in the middle, ten pieces in a row or one at a time through three words inserted from the internal library or copied from another resource - in any variations and variations, should always be drawn in five with a plus.
- , , ( ). — , , . , , . Esc ( ).
" " ("mention") , . :
- "@" ("@T" => "T");
- “ ” , , "@Tes", ("@Te|s"), . ;
- , " @ ?", "@" ("| @ ?") "@" (" @ | ?"), “ ” ;
- , (" @ ?|") — , (" @| ?") — , "@" ;
- , ("@| "), " " . — , . , , (“@ | ”).
, .
, , , — :
- , , . , , .
- . , - — ( ), — - . , . , .
, , — , .., , , .
!
HTML
, HTML . , , , , , , input, textarea , .
input , , .
textarea — " ", . , (. ). input, shift + Enter . 5 , . textarea , , .
, textarea, , , div. , , , ! contenteditable.
The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. (MDN)
, , .
:
<div
className={styles.input}
placeholder="Type a message"
contentEditable
/>
, — , . input onChange. div onInput, , . addEventListener , . :
class Input extends Component {
setRef = (ref) => {
this.ref = ref;
};
saveInputValue = () => {
const text = this.ref.innerText;
this.props.onChange(text);
};
componentDidMount() {
this.ref.addEventListener('input', this.saveInputValue);
}
componentWillUnmount() {
this.ref.removeEventListener('input', this.saveInputValue);
}
render() {
return (
<div
className={styles.input}
ref={this.setRef}
placeholder="Type a message"
contentEditable
/>
);
}
}
input ref innerText . div uncontrolled, .. , .
— . , Enter. Enter . . input keydown. :
onKeyDown = (event) => {
if (event.keyCode === ENTER_KEY_CODE && event.shiftKey === false) {
event.stopPropagation();
event.preventDefault();
this.props.submit();
}
};
componentDidMount() {
this.ref.addEventListener('keydown', this.onKeyDown);
...
}
event.preventDefault() Enter, event.stopPropogation() . , Shift+Enter .
-
— - . - . paste.
handlePaste = (event) => {
event.preventDefault();
const text = event.clipboardData.getData('text/plain');
document.execCommand('insertText', false, text);
};
componentDidMount() {
...
this.ref.addEventListener('paste', this.handlePaste);
}
event.preventDefault() , ( event.clipboardData === DataTransfer). , — . document.execCommand('insertText', false, text). , .. , .
. . fileList, — , , :
handlePaste = (event) => {
event.preventDefault();
if (event.clipboardData.files.length > 0) {
// ...
}
const text = event.clipboardData.getData('text/plain');
document.execCommand('insertText', false, text);
};
, .. , . .
Emoji
emoji . unicode emoji emoji . Emoji — , — execComand(‘insertText’). , , . ! , Emoji, , .
, , this.ref.focus() , :
insertEmoji = (emoji) => {
if (this.ref) {
this.ref.focus();
}
document.execCommand('insertText', false, emoji);
}
, : , Emoji, — . , - . , Emoji , , . .
, , .
API — Selection (MDN).
A Selection object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or manipulation, call window.getSelection().
window.getSelection() , , , . , , — . API . , . :
gem4me, "m" "e". selection selection.anchorNode ( ) selection.anchorOffset (5). , selection.anchorNode , , , . , , — . :
updateCaretPosition = () => {
const { node, cursorPosition } = this.state;
const selection = window.getSelection();
const newNode = selection.anchorNode;
const newCursorPosition = selection.anchorOffset;
if ( node === newNode && cursorPosition === newCursorPosition) {
return;
}
this.setState({ node, cursorPosition });
}
, . , :
— onInput, , . paste , .
onInput. , — . — , keyup ( keydown — , , ). , 2 ( , input keyup). state, . , .. , =).
. , ? click .
. -!
Emoji
, , Emoji. API Range, Selection.
The Range interface represents a fragment of a document that can contain nodes and parts of text nodes
, . :
const { node, cursorPosition } = this.state;
const range = document.createRange();
range.setStart(node, cursorPosition);
range.setEnd(node, cursorPosition);
, . — . :
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
selection, , . this.ref.focus() ! , , :
document.execCommand('insertText', false, emoji);
:
customFocus = () => {
const { node, cursorPosition } = this.state;
const range = document.createRange();
range.setStart(node, cursorPosition);
range.setEnd(node, cursorPosition);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
insertEmoji = (emoji) => {
this.customFocus();
document.execCommand('insertText', false, emoji);
};
, , . :
, , ( ). — , , . , , . Esc ( ).
, . keydown. , . :
if (
event.keyCode === UP_ARROW_KEY_CODE &&
this.props.isTextEmpty &&
this.props.mode === INPUT_CONTEXT_TYPES.STANDARD
) {
…
}
, , . :
if (
event.keyCode === UP_ARROW_KEY_CODE &&
this.props.isTextEmpty &&
this.props.mode === INPUT_CONTEXT_TYPES.STANDARD
) {
event.preventDefault();
event.stopPropagation();
this.props.setMode('edit');
document.execCommand('insertText', false, this.props.lastMessage);
}
document.execCommand('insertText') , .
Esc . keydown . this.ref.textContent = "".
, , . — , .. , . , "@". updateCaretPosition:
updateAndProcessCaretPosition = () => {
const { node, cursorPosition } = this.state;
const selection = window.getSelection();
const newNode = selection.anchorNode;
const newCursorPosition = selection.anchorOffset;
if (node === newNode && cursorPosition === newCursorPosition) {
return;
}
if (this.props.isAvailableMention) {
this.props.parseMention(node.textContent, cursorPosition);
};
this.setState({ node, cursorPosition });
}
isAvailableMention , . , true. :
parseMention = (text, cursorPosition) => {
if (text && cursorPosition && text.includes('@')) {
const lastWord = text
.substring(0, cursorPosition)
.split(' ')
.pop();
if (lastWord[0] === '@') {
this.setFilter(lastWord.substring(1, cursorPosition));
return;
}
}
this.clearFilter();
};
, "@" . — , , "@", . , .
insertMention = (insertRestPieceOfMention) => {
this.customFocus();
document.execCommand('insertText', false, insertRestPieceOfMention + ' ');
};
, document.execCommand('insertText') : , , .
, , , , , 20+ , , . , - . — , , (, , , , , - ), , , , . — , .
, Gem4me