PLT-2321 Move the toggle icon next to the link being previewed (#3071)

* PLT-2321 Move the toggle icon next to the link being previewed
only applicable to one-line messages started with link

* remove useless "Youtube" header when no title is available

* allow breaking long links instead of toggle

* simplify "/" to "/<wbr />" replacing
fix empty post without additional content body

* discard buggy "simplification"

1 files changed, 12 insertions, 0 deletions

diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx
index 623fe0660..a4622ad9e 100644
--- a/webapp/utils/text_formatting.jsx
+++ b/webapp/utils/text_formatting.jsx
@@ -34,6 +34,8 @@ export function formatText(text, options = {}) {
         output = replaceNewlines(output);
     }
 
+    output = insertLongLinkWbr(output);
+
     return output;
 }
 
@@ -76,6 +78,9 @@ export function doFormatText(text, options) {
         });
     }
 
+    //replace all "/" to "/<wbr />"
+    output = output.replace(/\//g, '/<wbr />');
+
     // reinsert tokens with formatted versions of the important words and phrases
     output = replaceTokens(output, tokens);
 
@@ -425,3 +430,10 @@ export function handleClick(e) {
         browserHistory.push(linkAttribute.value);
     }
 }
+
+//replace all "/" inside <a> tags to "/<wbr />"
+function insertLongLinkWbr(test) {
+    return test.replace(/\//g, (match, position, string) => {
+        return match + ((/a[^>]*>[^<]*$/).test(string.substr(0, position)) ? '<wbr />' : '');
+    });
+}
\ No newline at end of file