From c6334ffab719d7120e175c4bb3a8341a203a95f4 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 1 Aug 2016 16:35:28 +0100 Subject: [PATCH 1/3] Add Angular filter for wrapping words larger than N characters. --- .../public/coffee/filters/wrapLongWords.coffee | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 services/web/public/coffee/filters/wrapLongWords.coffee diff --git a/services/web/public/coffee/filters/wrapLongWords.coffee b/services/web/public/coffee/filters/wrapLongWords.coffee new file mode 100644 index 0000000000..b639de763b --- /dev/null +++ b/services/web/public/coffee/filters/wrapLongWords.coffee @@ -0,0 +1,17 @@ +define [ + "base" +], (App) -> + DEF_MIN_LENGTH = 20 + + _getWrappedWordsString = (baseStr, wrapperElName, minLength) -> + minLength = minLength || DEF_MIN_LENGTH + + findWordsRegEx = new RegExp "\\w{#{minLength},}", "g" + wrappingTemplate = "<#{wrapperElName} style='word-break: break-all;'>$&" + + baseStr.replace findWordsRegEx, wrappingTemplate + + + App.filter "wrapLongWords", () -> + (input, minLength) -> + _getWrappedWordsString input, "span", minLength \ No newline at end of file From ff62e505301b75e3f85108381b4f5cead9508539 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 1 Aug 2016 16:42:54 +0100 Subject: [PATCH 2/3] Integrate word wrapping filter in the chat component. --- services/web/app/views/project/editor/chat.jade | 2 +- services/web/public/coffee/filters/wrapLongWords.coffee | 2 +- services/web/public/coffee/ide/chat/index.coffee | 1 + services/web/public/stylesheets/app/editor/chat.less | 5 +++++ 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/services/web/app/views/project/editor/chat.jade b/services/web/app/views/project/editor/chat.jade index 538a5b9d37..86842c36de 100644 --- a/services/web/app/views/project/editor/chat.jade +++ b/services/web/app/views/project/editor/chat.jade @@ -45,7 +45,7 @@ aside.chat( mathjax, ng-repeat="content in message.contents track by $index" ) - span(ng-bind-html="content | linky:'_blank'") + span(ng-bind-html="content | linky:'_blank' | wrapLongWords") .new-message textarea( diff --git a/services/web/public/coffee/filters/wrapLongWords.coffee b/services/web/public/coffee/filters/wrapLongWords.coffee index b639de763b..ea97a58fec 100644 --- a/services/web/public/coffee/filters/wrapLongWords.coffee +++ b/services/web/public/coffee/filters/wrapLongWords.coffee @@ -7,7 +7,7 @@ define [ minLength = minLength || DEF_MIN_LENGTH findWordsRegEx = new RegExp "\\w{#{minLength},}", "g" - wrappingTemplate = "<#{wrapperElName} style='word-break: break-all;'>$&" + wrappingTemplate = "<#{wrapperElName} class=\"break-word\">$&" baseStr.replace findWordsRegEx, wrappingTemplate diff --git a/services/web/public/coffee/ide/chat/index.coffee b/services/web/public/coffee/ide/chat/index.coffee index d5a537903b..de9c46d62d 100644 --- a/services/web/public/coffee/ide/chat/index.coffee +++ b/services/web/public/coffee/ide/chat/index.coffee @@ -3,4 +3,5 @@ define [ "ide/chat/controllers/ChatController" "ide/chat/controllers/ChatMessageController" "ide/chat/directives/mathjax" + "filters/wrapLongWords" ], () -> \ No newline at end of file diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less index 495ac6dce0..7e1ad95b8d 100644 --- a/services/web/public/stylesheets/app/editor/chat.less +++ b/services/web/public/stylesheets/app/editor/chat.less @@ -129,6 +129,11 @@ } } +.break-word { + word-break: break-all; + color: red; +} + .editor-dark { .chat { .new-message { From 01637386bd142560a1551e0d250f61f7948c68a1 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 2 Aug 2016 11:59:43 +0100 Subject: [PATCH 3/3] Use string split instead of regex. --- .../web/public/coffee/filters/wrapLongWords.coffee | 14 +++++++++++--- .../web/public/stylesheets/app/editor/chat.less | 1 - 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/services/web/public/coffee/filters/wrapLongWords.coffee b/services/web/public/coffee/filters/wrapLongWords.coffee index ea97a58fec..db502e848a 100644 --- a/services/web/public/coffee/filters/wrapLongWords.coffee +++ b/services/web/public/coffee/filters/wrapLongWords.coffee @@ -3,13 +3,21 @@ define [ ], (App) -> DEF_MIN_LENGTH = 20 + _decodeHTMLEntities = (str) -> + str.replace /&#(\d+);/g, (match, dec) -> + String.fromCharCode dec; + _getWrappedWordsString = (baseStr, wrapperElName, minLength) -> minLength = minLength || DEF_MIN_LENGTH + words = baseStr.split ' ' - findWordsRegEx = new RegExp "\\w{#{minLength},}", "g" - wrappingTemplate = "<#{wrapperElName} class=\"break-word\">$&" + wordsWrapped = for word in words + if _decodeHTMLEntities(word).length >= minLength + "<#{wrapperElName} class=\"break-word\">#{word}" + else + word - baseStr.replace findWordsRegEx, wrappingTemplate + outputStr = wordsWrapped.join ' ' App.filter "wrapLongWords", () -> diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less index 7e1ad95b8d..592d39ecf4 100644 --- a/services/web/public/stylesheets/app/editor/chat.less +++ b/services/web/public/stylesheets/app/editor/chat.less @@ -131,7 +131,6 @@ .break-word { word-break: break-all; - color: red; } .editor-dark {