हमने अपने संदेशवाहक (Gem4me) में नए संदेश दर्ज करने के लिए क्षेत्र का विकास कैसे किया

सभी को नमस्कार!


मेरा नाम अलेक्जेंडर बाल्टिविच है, मैं Gem4me परियोजना के वेब-टीम के नेतृत्व की स्थिति पर काम करता हूं। परियोजना हर किसी और सभी के लिए एक अभिनव संदेशवाहक है (अब तक मेरी कल्पनाओं में, लेकिन हम इसके लिए प्रयास करते हैं; ;-))

वेब संस्करण स्टैक के बारे में संक्षेप में: ReactJS (जो इस पर संदेह करेगा) + mobX (व्यक्तिगत रूप से, मैं बिल्कुल उत्साही नहीं हूं, लेकिन हम कहीं भी माइग्रेट करने की योजना नहीं बनाते हैं; यदि आप विवरण में रुचि रखते हैं, तो आप वास्तव में क्या सोचते हैं, आप टिप्पणी नहीं लिखते हैं - शायद मैं इसके बारे में एक अलग लेख लिखूंगा) + स्टोरीबुक + wdio (स्क्रीनशॉट परीक्षण)।

मैसेंजर मुख्य रूप से छोटे संदेशों (और फिर इन सभी कॉल, स्टिकर और अन्य सम्मेलनों) के आदान-प्रदान के लिए एक कार्यक्रम है। संदेश बुनियादी कार्यक्षमता हैं जिन्हें अच्छी तरह से काम करना चाहिए। नहीं, ऐसा नहीं है: इसे पूरी तरह से काम करना चाहिए। और केवल एक जिसने कम से कम एक बार इस कार्यक्षमता के विकास का सामना किया, वह सभी दर्द जानता है जिसे दूर करना है ताकि सब कुछ सुंदर दिखे। हम सभी इस टीम के साथ गए। और हमने साझा करने का फैसला किया।

आवश्यकताएँ

इनपुट फ़ील्ड में क्या सुविधाएँ प्रदान करनी चाहिए?

• यह टेक्स्ट को प्रिंट करने के लिए ट्राइट है, जिसमें कई लाइनों में लिखने की क्षमता है (शिफ्ट + एंटर दबाकर)। संदेश को जल्दी से प्रारूपित करने के लिए उन्नत उपयोगकर्ताओं को मार्कडाउन अक्षरों का उपयोग करने के लिए भी उपयोग किया जाता है।

• पाठ बफर से चिपकाएँ। अक्सर पाठ की प्रतिलिपि बनाते समय, इस पाठ की पृष्ठभूमि को भी कॉपी किया जाता है (नीचे उदाहरण देखें) और स्वरूपण। लेकिन स्वच्छ, साफ-सुथरा पाठ और अधिक कुछ भी इनपुट क्षेत्र में नहीं जाना चाहिए।

• क्लिपबोर्ड से चित्र डालें। यह मुझे लगता है कि कोई भी इस सुविधा के बिना नहीं रह सकता है।
• स्माइली =) लंबे समय से संचार की संस्कृति का एक हिस्सा बन गया है। इसलिए, आप मुस्कुराहट के बारे में नहीं भूल सकते। पाठ की शुरुआत में, बीच में, एक पंक्ति में दस टुकड़े या एक समय में आंतरिक पुस्तकालय से डाले गए तीन शब्दों के माध्यम से या किसी अन्य संसाधन से कॉपी किए गए - किसी भी रूपांतर और भिन्नता में, हमेशा प्लस के साथ पांच में खींचा जाना चाहिए।
• , , ( ). — , , . , , . 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