Fix styling of task lists

app/assets/stylesheets/content/editor/_ckeditor.sass

@@ -109,6 +109,10 @@ ckeditor-augmented-textarea .op-ckeditor--wrapper
     background: white
     box-shadow: 0 0 5px hsla( 0,0%,0%,.1 )
 
-// Todo list override global label style
+// todolist override global label style
 label.todo-list__checkmark
   margin-bottom: 0
+
+// todolist list-style
+.ck-editor__editable .todo-list li
+  list-style: none

app/assets/stylesheets/content/editor/_markdown.sass

@@ -20,3 +20,10 @@ div.wiki
     background: transparent
     color: initial
 
+  ul.task-list
+    list-style: none
+    margin-left: 25px
+
+  // remove indentation of top-level task-list
+  > ul.task-list
+    margin-left: 0

frontend/src/app/components/wp-activity/user/user-activity.component.html

@@ -43,7 +43,7 @@
   <img *ngIf="bcfSnapshot"
        [src]="PathHelper.attachmentDownloadPath(bcfSnapshot.id, bcfSnapshot.file_name)"
        class="activity-thumbnail">
-  <div class="user-comment" [ngClass]="{ 'wiki': !inEdit }">
+  <div class="user-comment" >
     <div *ngIf="inEdit" class="inplace-edit">
       <div class="user-comment--form inplace-edit--write-value">
         <edit-form-portal [changesetInput]="changeset"
@@ -52,9 +52,12 @@
         </edit-form-portal>
       </div>
     </div>
-    <span *ngIf="!inEdit && (isComment || isBcfComment)"
+    <div *ngIf="!inEdit && (isComment || isBcfComment)"
           class="message"
-          [innerHtml]="postedComment"></span>
+          [ngClass]="{ 'wiki': !inEdit }"
+          [innerHtml]="postedComment">
+
+    </div>
     <ul class="work-package-details-activities-messages" *ngIf="!isInitial">
       <li *ngFor="let detail of details">
         <span class="message" [innerHtml]="detail"></span>

frontend/src/app/components/wp-activity/user/user-activity.component.ts

@@ -47,6 +47,7 @@ import {CommentService} from "core-components/wp-activity/comment-service";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {WorkPackageCommentFieldHandler} from "core-components/work-packages/work-package-comment/work-package-comment-field-handler";
 import {ViewPointOriginal} from "core-app/modules/bcf/bcf-wp-single-view/bcf-wp-single-view.component";
+import {DomSanitizer} from "@angular/platform-browser";
 
 @Component({
   selector: 'user-activity',
@@ -88,6 +89,7 @@ export class UserActivityComponent extends WorkPackageCommentFieldHandler implem
 
   constructor(readonly elementRef:ElementRef,
               readonly injector:Injector,
+              readonly sanitization:DomSanitizer,
               readonly PathHelper:PathHelperService,
               readonly wpLinkedActivities:WorkPackagesActivityService,
               readonly commentService:CommentService,
@@ -146,7 +148,7 @@ export class UserActivityComponent extends WorkPackageCommentFieldHandler implem
   }
 
   public get postedComment() {
-    return this.activity.comment.html;
+    return this.sanitization.bypassSecurityTrustHtml(this.activity.comment.html);
   }
 
   public ngAfterViewInit() {

spec/features/work_packages/attachments/attachment_upload_spec.rb

@@ -73,7 +73,7 @@ describe 'Upload attachment to work package', js: true do
           editor.click_and_type_slowly 'this is a comment!1'
           comment_field.submit_by_click
 
-          expect(page).to have_selector('.user-comment .message', text: 'this is a comment!1')
+          wp_page.expect_comment 'this is a comment!1'
         end
       end
     end

spec/features/work_packages/details/markdown/activity_comments_spec.rb

@@ -42,14 +42,14 @@ describe 'activity comments', js: true do
           comment_field.click_and_type_slowly 'this is a comment'
           comment_field.submit_by_enter
 
-          expect(page).to_not have_selector('.user-comment .message', text: 'this is a comment')
+          expect(page).to have_no_selector('.user-comment .message', text: 'this is a comment')
         end
 
         it 'submits with click' do
           comment_field.click_and_type_slowly 'this is a comment!1'
           comment_field.submit_by_click
 
-          expect(page).to have_selector('.user-comment .message', text: 'this is a comment!1')
+          wp_page.expect_comment 'this is a comment!1'
         end
 
         it 'submits comments repeatedly' do
@@ -57,8 +57,7 @@ describe 'activity comments', js: true do
           comment_field.submit_by_click
 
           expect(page).to have_selector('.user-comment > .message', count: 2)
-          expect(page).to have_selector('.user-comment > .message',
-                                        text: 'this is my first comment!1')
+          wp_page.expect_comment 'this is my first comment!1'
 
           expect(comment_field.editing?).to be false
           comment_field.activate!
@@ -68,8 +67,7 @@ describe 'activity comments', js: true do
           comment_field.submit_by_click
 
           expect(page).to have_selector('.user-comment > .message', count: 3)
-          expect(page).to have_selector('.user-comment > .message',
-                                        text: 'this is my second comment!1')
+          wp_page.expect_comment 'this is my second comment!1'
         end
       end
 
@@ -82,13 +80,13 @@ describe 'activity comments', js: true do
           comment_field.cancel_by_escape
           expect(comment_field.editing?).to be true
 
-          expect(page).to_not have_selector('.user-comment .message', text: 'this is a comment')
+          expect(page).to have_no_selector('.user-comment .message', text: 'this is a comment')
 
           # Click should cancel the editing
           comment_field.cancel_by_click
           expect(comment_field.editing?).to be false
 
-          expect(page).to_not have_selector('.user-comment .message', text: 'this is a comment')
+          expect(page).to have_no_selector('.user-comment .message', text: 'this is a comment')
         end
       end
 
@@ -116,8 +114,8 @@ describe 'activity comments', js: true do
           end
           comment_field.submit_by_click
 
+          wp_page.expect_comment 'Comment with bold text'
           expect(page).to have_selector('.user-comment .message strong', text: 'bold text')
-          expect(page).to have_selector('.user-comment .message', text: 'Comment with bold text')
 
           # Hover the new activity
           activity = page.find('#activity-2')
@@ -139,8 +137,8 @@ describe 'activity comments', js: true do
           end
 
           edit.submit_by_click
-          expect(page).to have_selector('.user-comment .message strong', text: 'bold text')
-          expect(page).to have_selector('.user-comment .message em', text: 'italic text')
+          wp_page.expect_comment 'Comment with italic text'
+          expect(page).to have_selector('.user-comment .message em', text: 'italic text', wait: 10)
         end
       end
     end
@@ -167,19 +165,20 @@ describe 'activity comments', js: true do
         # Extend the comment
         comment_field.input_element.click
 
+        comment_field.ckeditor.click_and_type_slowly :enter
+
         # Insert new text, need to do this separately.
-        [:enter, :return, 'this is ', '*', '*', 'a bold', '*', '*', ' remark'].each do |key|
-          comment_field.input_element.send_keys key
-        end
+        comment_field.ckeditor.click_and_type_slowly :return, 'this is ', '*', '*', 'a bold', '*', '*', ' remark'
 
         comment_field.submit_by_click
 
         # Scroll to the activity
         scroll_to_element(page.find('#activity-2'))
 
-        expect(page).to have_selector('.user-comment > .message', count: 2)
-        expect(page).to have_selector('.user-comment > .message blockquote')
-        expect(page).to have_selector('.user-comment > .message strong')
+        wp_page.expect_comment 'this is a bold remark'
+        expect(page).to have_selector('.user-comment .message', count: 2)
+        expect(page).to have_selector('.user-comment .message blockquote')
+        expect(page).to have_selector('.user-comment .message strong')
       end
     end
   end

spec/features/work_packages/edit_work_package_spec.rb

@@ -214,7 +214,7 @@ describe 'edit work package', js: true do
     wp_page.save_comment
 
     wp_page.expect_notification(message: 'The comment was successfully added.')
-    expect(page).to have_selector('.user-comment .message', text: 'hallo welt', wait: 10)
+    wp_page.expect_comment 'hallo welt'
   end
 
   it 'updates the presented custom fields based on the selected type' do

spec/features/work_packages/tabs/activity_revisions_spec.rb

@@ -207,7 +207,7 @@ describe 'Activity tab', js: true, selenium: true do
         comment_field.click_and_type_slowly "References r#{revision.revision}"
         comment_field.submit_by_click
 
-        expect(page).to have_selector('.user-comment .message a', text: revision.revision)
+        work_package_page.expect_comment "References r#{revision.revision}"
       end
     end
 

spec/support/pages/work_packages/abstract_work_package.rb

@@ -68,6 +68,12 @@ module Pages
       raise NotImplementedError
     end
 
+    def expect_comment(text)
+      retry_block do
+        page.find('.user-comment .message', text: text)
+      end
+    end
+
     def expect_hidden_field(attribute)
       page.within(container) do
         expect(page).to have_no_selector(".inplace-edit.#{attribute}")

spec/support/work_packages/work_package_field.rb

@@ -93,7 +93,8 @@ class WorkPackageField
   end
 
   def expect_inactive!
-    expect(field_container).to have_no_selector("#{field_type}")
+    expect(field_container).to have_selector(display_selector, wait: 10)
+    expect(field_container).to have_no_selector(field_type)
   end
 
   def expect_enabled!