From a283054cb26be8b017d656b475e6973cfa58ed0e Mon Sep 17 00:00:00 2001
From: d3m1d0v <d3m1d0v@yandex-team.ru>
Date: Mon, 10 Oct 2022 15:33:13 +0300
Subject: [PATCH] fix(checkbox): make checkboxes non-editable

---
 .nvmrc                                     |  1 +
 src/transform/plugins/checkbox/checkbox.ts |  1 +
 test/checkbox.test.ts                      |  6 +++---
 test/data/checkbox/checkbox.txt            | 12 ++++++------
 4 files changed, 11 insertions(+), 9 deletions(-)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..8351c193
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+14
diff --git a/src/transform/plugins/checkbox/checkbox.ts b/src/transform/plugins/checkbox/checkbox.ts
index 180bb08a..064828dd 100644
--- a/src/transform/plugins/checkbox/checkbox.ts
+++ b/src/transform/plugins/checkbox/checkbox.ts
@@ -48,6 +48,7 @@ export const checkboxReplace = function (_md: MarkdownIt, opts: CheckboxOptions)
         token.attrs = [
             ['type', 'checkbox'],
             ['id', id],
+            ['disabled', ''],
         ];
         if (checked === true) {
             token.attrs.push(['checked', 'true']);
diff --git a/test/checkbox.test.ts b/test/checkbox.test.ts
index e9e0eaf5..267b65a9 100644
--- a/test/checkbox.test.ts
+++ b/test/checkbox.test.ts
@@ -29,7 +29,7 @@ describe('markdown-it-checkbox', function () {
             assert.equal(
                 res,
                 '<div class="checkbox">\n' +
-                    '<input type="checkbox" id="checkbox0" checked="true">\n' +
+                    '<input type="checkbox" id="checkbox0" disabled="" checked="true">\n' +
                     '<label for="checkbox0">test written</label>\n' +
                     '</div>\n',
             );
@@ -44,7 +44,7 @@ describe('markdown-it-checkbox', function () {
             assert.equal(
                 res,
                 '<div class="cb">\n' +
-                    '<input type="checkbox" id="checkbox0" checked="true">\n' +
+                    '<input type="checkbox" id="checkbox0" disabled="" checked="true">\n' +
                     '<label for="checkbox0">test written</label>\n' +
                     '</div>\n',
             );
@@ -59,7 +59,7 @@ describe('markdown-it-checkbox', function () {
             assert.equal(
                 res,
                 '<div class="checkbox">\n' +
-                    '<input type="checkbox" id="cb0" checked="true">\n' +
+                    '<input type="checkbox" id="cb0" disabled="" checked="true">\n' +
                     '<label for="cb0">test written</label>\n' +
                     '</div>\n',
             );
diff --git a/test/data/checkbox/checkbox.txt b/test/data/checkbox/checkbox.txt
index 6f9e29c5..a9a3a50b 100644
--- a/test/data/checkbox/checkbox.txt
+++ b/test/data/checkbox/checkbox.txt
@@ -2,7 +2,7 @@
 [ ] unchecked
 .
 <div class="checkbox">
-<input type="checkbox" id="checkbox0">
+<input type="checkbox" id="checkbox0" disabled="">
 <label for="checkbox0">unchecked</label>
 </div>
 .
@@ -11,7 +11,7 @@
 [_] unchecked
 .
 <div class="checkbox">
-<input type="checkbox" id="checkbox1">
+<input type="checkbox" id="checkbox1" disabled="">
 <label for="checkbox1">unchecked</label>
 </div>
 .
@@ -20,7 +20,7 @@
 [x] checked
 .
 <div class="checkbox">
-<input type="checkbox" id="checkbox2" checked="true">
+<input type="checkbox" id="checkbox2" disabled="" checked="true">
 <label for="checkbox2">checked</label>
 </div>
 .
@@ -29,7 +29,7 @@
 [X] checked
 .
 <div class="checkbox">
-<input type="checkbox" id="checkbox3" checked="true">
+<input type="checkbox" id="checkbox3" disabled="" checked="true">
 <label for="checkbox3">checked</label>
 </div>
 .
@@ -41,13 +41,13 @@
 <ul>
 <li>
 <div class="checkbox">
-<input type="checkbox" id="checkbox4">
+<input type="checkbox" id="checkbox4" disabled="">
 <label for="checkbox4">unchecked</label>
 </div>
 </li>
 <li>
 <div class="checkbox">
-<input type="checkbox" id="checkbox5" checked="true">
+<input type="checkbox" id="checkbox5" disabled="" checked="true">
 <label for="checkbox5">checked</label>
 </div>
 </li>