Merge branch '350062-task-list-insert-task-button' into 'master'

Add <task-button> for every markdown task list item

See merge request gitlab-org/gitlab!82547

lib/banzai/filter/task_list_filter.rb

@@ -9,6 +9,9 @@ require 'task_list/filter'
 module Banzai
   module Filter
     class TaskListFilter < TaskList::Filter
+      def render_item_checkbox(item)
+        "<task-button></task-button>#{super}"
+      end
     end
   end
 end

spec/fixtures/markdown/markdown_golden_master_examples.yml

@@ -218,13 +218,13 @@
     </ol>
     <ul data-sourcepos="7:1-9:47" class="task-list" dir="auto">
     <li data-sourcepos="7:1-7:47" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container audio-container"><audio src="https://gitlab.com/1.mp3" controls="true" data-setup="{}" data-title="Sample Audio"></audio><a href="https://gitlab.com/1.mp3" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Audio'">Sample Audio</a></span>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container audio-container"><audio src="https://gitlab.com/1.mp3" controls="true" data-setup="{}" data-title="Sample Audio"></audio><a href="https://gitlab.com/1.mp3" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Audio'">Sample Audio</a></span>
     </li>
     <li data-sourcepos="8:1-8:47" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container audio-container"><audio src="https://gitlab.com/2.mp3" controls="true" data-setup="{}" data-title="Sample Audio"></audio><a href="https://gitlab.com/2.mp3" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Audio'">Sample Audio</a></span>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container audio-container"><audio src="https://gitlab.com/2.mp3" controls="true" data-setup="{}" data-title="Sample Audio"></audio><a href="https://gitlab.com/2.mp3" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Audio'">Sample Audio</a></span>
     </li>
     <li data-sourcepos="9:1-9:47" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container video-container"><video src="https://gitlab.com/3.mp4" controls="true" data-setup="{}" data-title="Sample Video" width="400" preload="metadata"></video><a href="https://gitlab.com/3.mp4" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Video'">Sample Video</a></span>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> <span class="media-container video-container"><video src="https://gitlab.com/3.mp4" controls="true" data-setup="{}" data-title="Sample Video" width="400" preload="metadata"></video><a href="https://gitlab.com/3.mp4" target="_blank" rel="nofollow noreferrer noopener" title="Download 'Sample Video'">Sample Video</a></span>
     </li>
     </ul>
 
@@ -670,19 +670,19 @@
   html: |-
     <ol data-sourcepos="1:1-6:18" class="task-list" dir="auto">
     <li data-sourcepos="1:1-1:12" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
     <li data-sourcepos="2:1-2:12" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
     <li data-sourcepos="3:1-6:18" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> example
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> example
     <ol data-sourcepos="4:4-6:18" class="task-list">
     <li data-sourcepos="4:4-6:18" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> of nested
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> of nested
     <ol data-sourcepos="5:7-6:18" class="task-list">
     <li data-sourcepos="5:7-5:22" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> task list</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> task list</li>
     <li data-sourcepos="6:7-6:18" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> items</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> items</li>
     </ol>
     </li>
     </ol>
@@ -697,11 +697,11 @@
   html: |-
     <ol start="4893" data-sourcepos="1:1-3:17" class="task-list" dir="auto">
     <li data-sourcepos="1:1-1:15" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
     <li data-sourcepos="2:1-2:15" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
     <li data-sourcepos="3:1-3:17" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> example</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> example</li>
     </ol>
 
 - name: reference_for_project_wiki
@@ -810,19 +810,19 @@
   html: |-
     <ul data-sourcepos="1:1-6:15" class="task-list" dir="auto">
     <li data-sourcepos="1:1-1:11" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> hello</li>
     <li data-sourcepos="2:1-2:11" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> world</li>
     <li data-sourcepos="3:1-6:15" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> example
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> example
     <ul data-sourcepos="4:3-6:15" class="task-list">
     <li data-sourcepos="4:3-6:15" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> of nested
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> of nested
     <ul data-sourcepos="5:5-6:15" class="task-list">
     <li data-sourcepos="5:5-5:19" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" checked disabled> task list</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" checked disabled> task list</li>
     <li data-sourcepos="6:5-6:15" class="task-list-item">
-    <input type="checkbox" class="task-list-item-checkbox" disabled> items</li>
+    <task-button></task-button><input type="checkbox" class="task-list-item-checkbox" disabled> items</li>
     </ul>
     </li>
     </ul>

spec/lib/banzai/filter/task_list_filter_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Banzai::Filter::TaskListFilter do
+  include FilterSpecHelper
+
+  it 'adds `<task-button></task-button>` to every list item' do
+    doc = filter("<ul data-sourcepos=\"1:1-2:20\">\n<li data-sourcepos=\"1:1-1:20\">[ ] testing item 1</li>\n<li data-sourcepos=\"2:1-2:20\">[x] testing item 2</li>\n</ul>")
+
+    expect(doc.xpath('.//li//task-button').count).to eq(2)
+  end
+end