Basic markitup integration for issue edit

app/coffee/modules/issues/detail.coffee

@@ -529,3 +529,138 @@ CommentDirective = () ->
     return {link:link}
 
 module.directive("tgComment", CommentDirective)
+
+#############################################################################
+## WYSIWYG markitup editor directive
+#############################################################################
+
+$i18next = {t: (key) -> key}
+
+tgMarkitupDirective = ($rootscope) ->
+    link = ($scope, $el, $attrs, $model) ->
+        openHelp = () ->
+            window.open($rootscope.urls.wikiHelpUrl(), '_blank')
+
+        markdownSettings =
+            nameSpace: 'markdown'
+            onShiftEnter: {keepDefault:false, openWith:'\n\n'}
+            markupSet: [
+                {
+                    name: $i18next.t('wiki-editor.heading-1')
+                    key: "1"
+                    placeHolder: $i18next.t('wiki-editor.placeholder')
+                    closeWith: (markItUp) -> markdownTitle(markItUp, '=')
+                },
+                {
+                    name: $i18next.t('wiki-editor.heading-2')
+                    key: "2"
+                    placeHolder: $i18next.t('wiki-editor.placeholder')
+                    closeWith: (markItUp) -> markdownTitle(markItUp, '-')
+                },
+                {
+                    name: $i18next.t('wiki-editor.heading-3')
+                    key: "3"
+                    openWith: '### '
+                    placeHolder: $i18next.t('wiki-editor.placeholder')
+                },
+                {
+                    separator: '---------------'
+                },
+                {
+                    name: $i18next.t('wiki-editor.bold')
+                    key: "B"
+                    openWith: '**'
+                    closeWith: '**'
+                },
+                {
+                    name: $i18next.t('wiki-editor.italic')
+                    key: "I"
+                    openWith: '_'
+                    closeWith: '_'
+                },
+                {
+                    name: $i18next.t('wiki-editor.strike')
+                    key: "S"
+                    openWith: '~~'
+                    closeWith: '~~'
+                },
+                {
+                    separator: '---------------'
+                },
+                {
+                    name: $i18next.t('wiki-editor.bulleted-list')
+                    openWith: '- '
+                },
+                {
+                    name: $i18next.t('wiki-editor.numeric-list')
+                    openWith: (markItUp) -> markItUp.line+'. '
+                },
+                {
+                    separator: '---------------'
+                },
+                {
+                    name: $i18next.t('wiki-editor.picture')
+                    key: "P"
+                    replaceWith: '![[![Alternative text]!]]([![Url:!:http://]!] "[![Title]!]")'
+                },
+                {
+                    name: $i18next.t('wiki-editor.link')
+                    key: "L"
+                    openWith: '['
+                    closeWith: ']([![Url:!:http://]!] "[![Title]!]")'
+                    placeHolder: $i18next.t('wiki-editor.link-placeholder')
+                },
+                {
+                    separator: '---------------'
+                },
+                {
+                    name: $i18next.t('wiki-editor.quotes')
+                    openWith: '> '
+                },
+                {
+                    name: $i18next.t('wiki-editor.code-block')
+                    openWith: '```\n'
+                    closeWith: '\n```'
+                },
+                {
+                    separator: '---------------'
+                },
+                # {
+                #     name: $i18next.t('wiki-editor.preview')
+                #     call: preview
+                #     className: "preview-icon"
+                # },
+                # {
+                #     separator: '---------------'
+                # },
+                # {
+                #     name: $i18next.t('wiki-editor.help')
+                #     call: openHelp
+                #     className: "help"
+                # }
+            ]
+            afterInsert: (event) ->
+                target = angular.element(event.textarea)
+                $model.$setViewValue(target.val())
+
+        markdownTitle = (markItUp, char) ->
+            heading = ''
+            n = $.trim(markItUp.selection or markItUp.placeHolder).length
+
+            for i in [0..n-1]
+                heading += char
+
+            return '\n'+heading+'\n'
+
+        element = angular.element($el)
+        element.markItUp(markdownSettings)
+
+        element.on "keypress", (event) ->
+            $scope.$apply()
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+    return {link:link, require:"ngModel"}
+
+module.directive("tgMarkitup", ["$rootScope", tgMarkitupDirective])

app/partials/issues-detail-edit.jade

@@ -25,7 +25,7 @@ block content
 
             section.us-content
                 // TODO Placeholder should be a WYSIWYG with issue.description
-                textarea(placeholder="Write a description of your issue", ng-model="issue.description")
+                textarea(placeholder="Write a description of your issue", ng-model="issue.description", tg-markitup)
 
             // include views/modules/attachments
             textarea(ng-model="issue.comment", placeholder="Write here a new commet")

app/styles/vendor/jquery.textcomplete.css

@@ -0,0 +1,36 @@
+/* Sample */
+
+.dropdown-menu {
+    border: 1px solid #ddd;
+    background-color: white;
+}
+
+.dropdown-menu li {
+    border-top: 1px solid #ddd;
+    padding: 2px 5px;
+}
+
+.dropdown-menu li:first-child {
+    border-top: none;
+}
+
+.dropdown-menu li:hover,
+.dropdown-menu .active {
+    background-color: rgb(110, 183, 219);
+}
+
+.textcomplete-wrapper {
+    width: 100%;
+}
+
+/* SHOULD not modify */
+
+.dropdown-menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.dropdown-menu a:hover {
+    cursor: pointer;
+}

app/styles/vendor/markitup.css

@@ -0,0 +1,175 @@
+/* -------------------------------------------------------------------
+// markItUp!
+// By Jay Salvat - http://markitup.jaysalvat.com/
+// ------------------------------------------------------------------*/
+.markItUp .markItUpButton1 a {
+  background-image:url("../images/markitup/h1.png");
+}
+
+.markItUp .markItUpButton2 a {
+  background-image:url("../images/markitup/h2.png");
+}
+
+.markItUp .markItUpButton3 a {
+  background-image:url("../images/markitup/h3.png");
+}
+
+.markItUp .markItUpButton4 a {
+  background-image:url("../images/markitup/bold.png");
+}
+.markItUp .markItUpButton5 a {
+  background-image:url("../images/markitup/italic.png");
+}
+
+.markItUp .markItUpButton6 a {
+  background-image:url("../images/markitup/stroke.png");
+}
+
+.markdown .markItUpButton7 a {
+  background-image:url("../images/markitup/list-bullet.png");
+}
+.markdown .markItUpButton8 a {
+  background-image:url("../images/markitup/list-numeric.png");
+}
+
+.markdown .markItUpButton9 a {
+  background-image:url("../images/markitup/picture.png");
+}
+.markdown .markItUpButton10 a {
+  background-image:url("../images/markitup/link.png");
+}
+
+.markdown .markItUpButton11 a   {
+  background-image:url("../images/markitup/quotes.png");
+}
+.markdown .markItUpButton12 a   {
+  background-image:url("../images/markitup/code.png");
+}
+
+.markdown .preview-icon a {
+  background-image:url("../images/markitup/preview.png");
+}
+
+.markdown .help a {
+  background-image:url("../images/markitup/help.png");
+}
+
+
+/* -------------------------------------------------------------------
+// markItUp! Universal MarkUp Engine, JQuery plugin
+// By Jay Salvat - http://markitup.jaysalvat.com/
+// ------------------------------------------------------------------*/
+.markItUp * {
+  margin:0px; padding:0px;
+  outline:none;
+}
+.markItUp a:link,
+.markItUp a:visited {
+  color:#000;
+  text-decoration:none;
+}
+.markItUpContainer  {
+	padding:5px 5px 2px 5px;
+  font:11px Verdana, Arial, Helvetica, sans-serif;
+}
+.markItUpEditor {
+  font:12px 'Courier New', Courier, monospace;
+  padding:5px;
+  height:320px;
+  clear:both;
+  line-height:18px;
+  overflow:auto;
+}
+.markItUpPreviewFrame	{
+  overflow:auto;
+  background-color:#FFF;
+  width:99.9%;
+  height:300px;
+  margin:5px 0;
+}
+.markItUpFooter {
+  width:100%;
+}
+.markItUpResizeHandle {
+  overflow:hidden;
+  width:22px; height:5px;
+  margin-left:auto;
+  margin-right:auto;
+  background-image:url(../images/markitup/handle.png);
+  cursor:n-resize;
+}
+/***************************************************************************************/
+/* first row of buttons */
+.markItUp .markItUpHeader ul {
+  margin: 0;
+}
+.markItUpHeader ul li	{
+  list-style:none;
+  float:left;
+  position:relative;
+  margin: 3px;
+}
+.markItUpHeader ul li:hover > ul{
+  display:block;
+}
+.markItUpHeader ul .markItUpDropMenu {
+  background:transparent url(../images/markitup/menu.png) no-repeat 115% 50%;
+  margin-right:5px;
+}
+.markItUpHeader ul .markItUpDropMenu li {
+  margin-right:0px;
+}
+/* next rows of buttons */
+.markItUpHeader ul ul {
+  display:none;
+  position:absolute;
+  top:18px; left:0px;
+  background:#FFF;
+  border:1px solid #000;
+}
+.markItUpHeader ul ul li {
+  float:none;
+  border-bottom:1px solid #000;
+}
+.markItUpHeader ul ul .markItUpDropMenu {
+  background:#FFF url(../images/markitup/submenu.png) no-repeat 100% 50%;
+}
+.markItUpHeader ul .markItUpSeparator {
+  margin:2px 10px 0 10px;
+  width:1px;
+  height:16px;
+  overflow:hidden;
+  background-color:#CCC;
+}
+.markItUpHeader ul ul .markItUpSeparator {
+  width:auto; height:1px;
+  margin:0px;
+}
+/* next rows of buttons */
+.markItUpHeader ul ul ul {
+  position:absolute;
+  top:-1px; left:150px;
+}
+.markItUpHeader ul ul ul li {
+  float:none;
+}
+.markItUpHeader ul a {
+  display:block;
+  width:16px; height:16px;
+  text-indent:-10000px;
+  background-repeat:no-repeat;
+  padding:3px;
+  margin:0px;
+}
+.markItUpHeader ul ul a {
+  display:block;
+  padding-left:0px;
+  text-indent:0;
+  width:120px;
+  padding:5px 5px 5px 25px;
+  background-position:2px 50%;
+}
+.markItUpHeader ul ul a:hover  {
+  color:#FFF;
+  background-color:#000;
+}

gulpfile.coffee

@@ -63,7 +63,9 @@ paths = {
         "app/vendor/pikaday/pikaday.js",
         "app/vendor/jquery-flot/jquery.flot.js",
         "app/vendor/jquery-flot/jquery.flot.pie.js",
-        "app/vendor/jquery-flot/jquery.flot.time.js"
+        "app/vendor/jquery-flot/jquery.flot.time.js",
+        "app/vendor/jquery-textcomplete/jquery.textcomplete.js",
+        "app/vendor/markitup/markitup/jquery.markitup.js"
     ]
 }
 
@@ -173,7 +175,7 @@ gulp.task "copy",  ->
     gulp.src("#{paths.app}/fonts/*")
         .pipe(gulp.dest("#{paths.dist}/fonts/"))
 
-    gulp.src("#{paths.app}/images/*")
+    gulp.src("#{paths.app}/images/**/*")
         .pipe(gulp.dest("#{paths.dist}/images/"))