Skip to content

Latest commit

 

History

History
103 lines (70 loc) · 20.9 KB

expected_behavior.md

File metadata and controls

103 lines (70 loc) · 20.9 KB

Expected behavior

  1. Each paragraph in the Twitter input is created using a new <div> element with each line becoming a span that includes other spans for the normal text and spans for the highlighted text. However, to simplify things, my version will create each paragraph using the <p> element, with the formatted text added as text content immediately into the element, while highlighted text is added inside a <span> element with styling.

  2. Empty paragraphs are allowed in the input area, so users can press the Enter key without having to type anything. If they start typing, the text will go into the last paragraph they added by pressing the Enter key, leaving the previous ones empty.

  3. When the user presses the Backspace key in an empty paragraph, the paragraph is deleted and the cursor goes back to the previous paragraph. If it is the first paragraph in the editor, the paragraph is just deleted.

  4. Text that doesn't match any patterns shouldn't be highlighted.

  5. The Twitter input area supports hashtags, user mentions and the less frequently used cashtags which are used to track stock symbols and share financial information.

    • The pattern for cashtags seems to be a $ character followed by a minimum of 1 and a maximum of 6 alphabetical characters. No digits or non-word characters are allowed.
    • An underscore _ character is allowed as long as it doesn't come at the start or at the end of the cashtag.

  6. When I start typing a user mention, it should be highlighted once it matches the pattern.

    • When I start typing the @ character, the input doesn't highlight the word. So, if I type Hello @, none of this text will be highlighted, because none of it matches the user mention pattern yet.
    • If I add any word character (i.e. characters that match the regex pattern \w) immediately after the @ character, then the user mention will be highlighted. So, if I type Hello @amsaid1989, then @amsaid1989 will be highlighted because it matches the user mention pattern.
    • If I add a non-word character (i.e. characters that match the regex pattern \W such as -, /, =, Space) immediately after the @ character, then the text isn't going to be highlighted.
    • If I type a sequence of word characters after the @ character, they will all be highlighted. If I follow them by a non-word character, then starting from this non-word character, everything that follows will not be highlighted. For example, @amsaid-1989, the text @amsaid will be highlighted, but the text -1989 will not.
    • When we erase characters from a highlighted user mention, the highlighting will be removed if the user mention no longer matches the pattern. So, if I have the text @amsaid1989 which will be highlighted, and I remove all the characters until only the @ character remains, then the highlighting will be removed.
    • When we erase characters from a word that is not highlighted, it will get highlighted if it ends up matching the user mention pattern. So, if I have the word @-amsaid1989 which will not be highlighted, because it doesn't match the user mention pattern, and then I remove the - character leaving @amsaid1989 behind, then @amsaid1989 will be highlighted because it now matches the user mention pattern.

  7. When I start typing a hashtag, it should be highlighted once it matches the pattern.

    • When I start typing the # character, the input doesn't highlight the word. So, if I type Hello #, none of this text will be highlighted, because none of it matches the hashtag pattern yet.
    • If I add any word character (i.e. characters that match the regex pattern \w) immediately after the # character, then the hashtag will be highlighted. NOTE: To be highlighted, a sequence of word characters that follow that # character has to include at least 1 character from the set [a-zA-Z]. If the sequence of word characters only includes numbers and underscores, then it will not be highlighted as a hashtag.
    • If I add a non-word character (i.e. characters that match the regex pattern \W such as -, /, =, Space) immediately after the # character, then the text isn't going to be highlighted.
    • If I type a sequence of word characters after the # character, they will all be highlighted. If I follow them by a non-word character, then starting from this non-word character, everything that follows will not be highlighted. For example, #100DaysOfCode-2021, the text #100DaysOfCode will be highlighted, but the text -2021 will not.
    • When we erase characters from a highlighted hashtag, the highlighting will be removed if the hashtag no longer matches the pattern. So, if I have the text #100DaysOfCode which will be highlighted, and I remove all the characters until only the #100 remains, then the highlighting will be removed because the remaining text doesn't match the hashtag pattern.
    • When we erase characters from a word that is not highlighted, it will get highlighted if it ends up matching the hashtag pattern. So, if I have the word #100-DaysOfCode which will not be highlighted, because it doesn't match the hashtag pattern, and then I remove the - character leaving #100DaysOfCode behind, then #100DaysOfCode will be highlighted because it now matches the hashtag pattern.

  8. When I start typing a URL, it only gets highlighted if the it includes one of the valid 'top-level domains'. To pick up a list that can be used for the regex pattern, use this text file.

    • In the first part of the URL (up to the top-level domain), the only non-word character that seems to be allowed (other than the . character that separates the URL parts) is the - character. So, you can have a URL such as the-wizard-apprentice.com.
    • In the subsequent parts of the URL that come after the top-level domain and that are usually separated by the / character, all character seem to be allowed, including the @ and # characters which are normally used for the user mentions and hashtags respectively.
    • For a URL to be valid for highlighting it either has to come at the beginning of the line or be surrounded by word-boundary character at both ends. So, if we have the text hellohttps://google.com, none of it will be highlighted, even though the https://google.com is a URL, but because it comes immediately after a sequence of word character with no word-boundary characters separating them.
    • The URL doesn't need to be valid for it to be highlighted. If it matches the pattern, it will be highlighted even if it points to nowhere.
    • When we erase characters from a highlighted URL, the highlighting will be removed if the URL no longer matches the pattern.
    • When we erase characters from a word that is not highlighted, it will get highlighted if it ends up matching the URL pattern.

  9. If we have two valid hashtags one after the other, with no non-word character separating them from each other, then non of them will be highlighted (e.g. #buildinpublic#100DaysOfCode. Although #buildinpublic and #100DaysOfCode are both valid hashtags on their own, because they come next to each other, they are both not going to be highlighted).

    • To be specific, if the word includes two # characters that are separated only by word characters, then it is not going to be highlighted. If you add another #, to a hashtag that is already highlighted, then the highlighting will be removed.

  10. If we have two valid user mentions one after the other, with no non-word character separating them from each other, then non of them will be highlighted (e.g. @amsaid@amsaid1989. Although @amsaid and @amsaid1989 are both valid user mentions on their own, because they come next to each other, they are both not going to be highlighted).

    • To be specific, if the word includes two @ characters that are separated only by word characters, then it is not going to be highlighted. If you add another @, to a user mention that is already highlighted, then the highlighting will be removed.

  11. If we have a hashatg that is highlighted, then we add an @ character immediately afterwards, the hashtag will continue to be highlighted, and the @ character will be treated normally as a non-word character, which means that it, or any text that comes after it, won't be highlighted. (e.g. #buildinpublic@amsaid1989. #buildinpublic will be highlighted normally, but @amsaid1989 won't).

  12. If we have a hashatg that is highlighted, then we add an # character immediately afterwards, the highlighting will be removed.

  13. If we have a user mention that is highlighted, then we add an # character immediately afterwards, the user mention will continue to be highlighted, and the # character will be treated normally as a non-word character, which means that it, or any text that comes after it, won't be highlighted. (e.g. @amsaid1989#buildinpublic. @amsaid1989 will be highlighted normally, but #buildinpublic won't).

  14. If we have a user mention that is highlighted, then we add an # character immediately before with no word or non-word characters in between, then the highlighting of the user mention will be removed. If we add some word characters after the # character so it matches the hashtag pattern, then the hashtag part will be highlighted, but the user mention part won't. Same thing happens with the $ and @ characters. Once I add them, the highlighting of the user mention will be removed. When I start adding new word characters afterwards, making them a valid cashtag, then they will be highlighted. However, adding word characters after the @ character, nothing will be highlighted, because we will have 2 user mentions next to each other.

  15. If we have a hashatg that is highlighted, then we add an @ character immediately before with no word characters in between, the hashtag will continue to be highlighted, and the @ character will be treated normally as a non-word character, so it won't be highlighted. However, once we start adding word characters in between, then the highlighting of the hashtag part will be removed and the user mention will be highlighted instead. The same thing happens with both the # and $ characters for hashtags and cashtags respectively. The # and $ characters on their own are not going to remove the formatting of the highlighted hashtags. But once I start adding word characters the highlighting will be removed. This applies regardless of whether the new word characters constitute a valid user mention, hashtag or cashtag. Once I add word characters, the original hashtag won't be highlighted anymore. If the new word characters constitute a user mention or cashtag, then they will be highlighted. But if I add word characters after the # nothing will be highlighted because there will be 2 hashtags next to each other.

  16. If we have a hashtag that is highlighted, then we add word characters immediately before the # character, with no non-word characters in between, then the highlighting of the hashtag will be removed. So, if we have #100DaysOfCode, it will be highlighted. If we then add any word characters immediately before a#100DaysOfCode, then the highlighting will be removed entirely.

  17. If we have a user mention that is highlighted, then we add word characters immediately before the @ character, with no non-word characters in between, then the highlighting of the user mention will be removed. So, if we have @amsaid1989, it will be highlighted. If we then add any word characters immediately before a@amsaid1989, then the highlighting will be removed entirely.

  18. If we have two URLs (that match the URL pattern so both should be highlighted) sitting immediately next to one another, then they will both be highlighted together as one URL. So, if we have google.comtwitter.com, they will be highlighted as 1 URL not as 2 separate ones.

  19. If we have a highlighted URL then we add a user mention immediately after it, then the highlighting will be removed. So, for example, if we have google.com, then we append @amsaid1989, then the highlighting will be removed entirely and we will have the text google.com@amsaid1989 as regular text.

    • However, if there is a part of the URL that also matches the URL pattern, and it doesn't come immediately before the user mention, then that part of the text will be highlighted. For example, if the original URL was google.co.uk and then we added the user mention making the text google.co.uk@amsaid1989, the google.co part will still be highlighted, because it matches the URL pattern, but the .uk@amsaid1989 part won't be highlighted.

  20. If we have a highlighted URL then we add a hashtag immediately after it, the URL pattern will maintain its highlighting, but the hashtag will not be highlighted in any way. For example, if we have google.com, then we add #100DaysOfCode afterwards, we will end up with the text google.com#100DaysOfCode with the google.com part of the text being highlighted while the #100DaysOfCode part is left as normal text.

  21. If we have a highlighted URL such as google.com, then we add an @ character immediately before, then all the word character in the URL, up to the first non-word character, will be highlighted as a user mention, while the rest of the URL will lose its highlighting. So, if google.com is highlighted as a URL, then we add the @ character making it @google.com, then the @google part will be highlighted as a user mention while the .com part will not be highlighted at all.

    • If we add any word character after the @ character, then they will still be treated as a user mention along with all word characters in the URL up to the first non-word character. So, if we have the text @amsaid1989google.com, the @amsaid1989google part will be highlighted while the .com part won't have any highlighting.
    • However, if the URL includes the protocol (so either http or https) at the beginning, then once we add the @ character, all the highlighting will be removed. Even if we add other word characters after the @ character, it will still be left with no highlighting. So, if we have the text @amsaid1989https://google.com, none of it will be highlighted neither as a URL nor as a user mention.

  22. If we have a highlighted URL such as google.com, then we add an # character immediately before, then all the word character in the URL, up to the first non-word character, will be highlighted as a hashtag, while the rest of the URL will lose its highlighting. So, if google.com is highlighted as a URL, then we add the # character making it #google.com, then the #google part will be highlighted as a hashtag while the .com part will not be highlighted at all.

    • If we add any word character after the # character, then they will still be treated as a hashtag along with all word characters in the URL up to the first non-word character. So, if we have the text #100DaysOfCodegoogle.com, the #100DaysOfCodegoogle part will be highlighted while the .com part won't have any highlighting.
    • However, if the URL includes the protocol (so either http or https) at the beginning, then once we add the # character, all the highlighting will be removed. Even if we add other word characters after the # character, it will still be left with no highlighting. So, if we have the text #100DaysOfCodehttps://google.com, none of it will be highlighted neither as a URL nor as a hashtag.

  23. So, the way cashtags work is that when I type the $ character, nothing happens. If I add characters that make it a valid cashtag, then it will be highlighted. For example, $GOOG will be highlighted as a cashtag because it has 4 alphabetical characters afer the $ character.

    • If I add more than 6 alphabetical characters after the $ character, then all highlighting will be removed. For example, $GOOGLEINC won't be highlighted because it contains 9 alphabetical characters.
    • If I add any digits, then all of the highlighting will be removed. For example $GOOG21 won't be highlighted at all despite the fact that it only has 6 characters. But because 2 of those characters are digits, then it is not highlighted at all.

  24. If I type the $ character and follow it with some alphabetical characters that are less than 6 characters in total, then add a non-word character, all the word characters up to the non-word character will be highlighted. Starting from the non-word and including any word characters that come afterwards, there will be no highlighting. For example, if I type $GO-OG, then the $GO part will be highlighted while the -OG part won't have any highlighting.

    • If the non-word character comes immediately after the $ character, then none of the text will be highlighted. For example, if we have the text $-GOOG, none of it will be highlighted.

  25. In cashtags, a suffix made of an underscore _ character and a minimum of 1 and a maximum of 2 alpahabetical characters are allowed. Even if a cashtag already has 6 alphabetical characters after the $ character, you can still add the underscore suffix, and it will be highlighted. So, if we have the text $GOOGLE which will be highlighted, then we add _US making the text $GOOGLE_US, the entire text will still be highlighted.

    • If this suffix doesn't match the format required (e.g. an underscore with no characters afterwards, with more than 2 characters afterwards or with non-alphabetical characters afterwards), then the first part of the text will be highlighted, but the suffix won't. For example, if we have the text $GOOGLE_21, then the $GOOGLE part will be highlighted while the _21 part won't.
    • The underscore is only allowed as a suffix (as long as that suffix meets the requirements defined above). If it comes at the beginning (i.e. after the $ character), then none of the text will be highlighted. For example, if we have the text $_GOOG, then non of it will be highlighted.

  26. If I erase any characters from or around a highlighted cashtag making the remaining text unvalid as a chastag, then the highlighting will be removed. For example, if I have $GO and I erase GO leaving only the $ character behind, then the highlighting will be removed. Also, if I have the text $GOOG 2021 with the $GOOG part highlighted and then I remove the space between the two words, then the highlighting will be removed.

  27. If two valid cashtags come one after the other, then only the first of them will be highlighted. For example, if we have the text $GOOG$AMZN, then only the $GOOG part will be highlighted while the $AMZN part won't.

  28. If a cashtag comes immediately after a highlighted user mention or hashtag, then the cashtag won't be highlighted. For example, in @amsaid1989$GOOG and #100DaysOfCode$GOOG the $GOOG part won't be highlighted at all.

  29. If a cashtag comes after a URL, then it will be treated differently depending on where exactly it comes.

    • If it comes immediately after the top-level domain, then it won't be highlighted. For example, in google.com$GOOG the google.com part will be highlighted but the $GOOG part won't.
    • If it comes after the subsequent parts of the URL, then it will be treated as part of the URL. For example, all of the text google.com/search$GOOG will be highlighted as a URL. NOTE: the $GOOG part is highlighted as part of the URL, not as a cashtag.

  30. If we have a highlighted cashtag, then we add an @ or a # character immediately before, then the highlighting will be removed. So, @$GOOG and #$GOOG won't have any highlighting.

    • If I start adding word characters after the @ or # characters, then any part of the text that matches the user mention or the hashtag patterns will be highlighted. For example, in @amsaid1989$GOOG the @amsaid1989 part will be highlighted while the $GOOG part won't. Similarly, in #100DaysOfCode$GOOG the #100DaysOfCode will be highlighted while the $GOOG part won't.
    • The same happens with the $ characters. So, $$GOOG won't have any highlighting, but once I start adding word characters in between, making the first part valid, then that part will be highlighted. So, if we have the text $AMZN$GOOG, then the $AMZN part will be highlighted while the $GOOG part won't.

  31. If we have a highlighted cashtag and we add word characters immediately before without any non-word characters separating them from the cashtag, then the cashtag won't be highlighted. For example, none of the Hi$GOOGLE text will be highlighted despite the fact that, on its own, the $GOOGLE part is valid as a cashtag. However, because it comes immediately after a sequence of word characters, it is not treated as a cashtag and, therefore, not highlighted.

  32. If we add a URL before a highlighted cashtag, then depending on the rules defined above, the highlighting of the cashtag may be removed, or it may be highlighted as part of the URL.

  33. The behaviors defined above work the same when pasting content into the editor.