DEV: Use async/await in checklist (#22943)

plugins/checklist/assets/javascripts/discourse/initializers/checklist.js

@@ -39,15 +39,18 @@ function addUlClasses(boxes) {
     ) {
       parent = parent.parentElement;
     }
-    if (parent.nodeName === "LI" && parent.parentElement.nodeName === "UL") {
-      if (!hasPrecedingContent(val)) {
+
+    if (
+      parent.nodeName === "LI" &&
+      parent.parentElement.nodeName === "UL" &&
+      !hasPrecedingContent(val)
+    ) {
       parent.classList.add("has-checkbox");
       val.classList.add("list-item-checkbox");
       if (!val.nextSibling) {
         val.insertAdjacentHTML("afterend", "&#8203;"); // Ensure otherwise empty <li> does not collapse height
       }
     }
-    }
   });
 }
 
@@ -67,8 +70,8 @@ export function checklistSyntax(elem, postDecorator) {
   }
 
   boxes.forEach((val, idx) => {
-    val.onclick = function (ev) {
-      const box = ev.currentTarget;
+    val.onclick = async (event) => {
+      const box = event.currentTarget;
       const classList = box.classList;
 
       if (classList.contains("permanent") || classList.contains("readonly")) {
@@ -83,8 +86,8 @@ export function checklistSyntax(elem, postDecorator) {
       box.classList.add("hidden");
       boxes.forEach((e) => e.classList.add("readonly"));
 
-      ajax(`/posts/${postModel.id}`, { type: "GET", cache: false })
-        .then((result) => {
+      try {
+        const post = await ajax(`/posts/${postModel.id}`);
         const blocks = [];
 
         // Computing offsets where checkbox are not evaluated (i.e. inside
@@ -102,7 +105,7 @@ export function checklistSyntax(elem, postDecorator) {
           /~~(?=\S).*?\S~~/gm,
         ].forEach((regex) => {
           let match;
-            while ((match = regex.exec(result.raw)) != null) {
+          while ((match = regex.exec(post.raw)) != null) {
             blocks.push([match.index, match.index + match[0].length]);
           }
         });
@@ -112,7 +115,7 @@ export function checklistSyntax(elem, postDecorator) {
           /([^\[\n]|^)\*\S.+?\S\*(?=[^\]\n]|$)/gm,
         ].forEach((regex) => {
           let match;
-            while ((match = regex.exec(result.raw)) != null) {
+          while ((match = regex.exec(post.raw)) != null) {
             // Simulate lookbehind - skip the first character
             blocks.push([match.index + 1, match.index + match[0].length]);
           }
@@ -121,7 +124,7 @@ export function checklistSyntax(elem, postDecorator) {
         // make the first run go to index = 0
         let nth = -1;
         let found = false;
-          const newRaw = result.raw.replace(
+        const newRaw = post.raw.replace(
           /\[(\s|\_|\-|\x|\\?\*)?\]/gi,
           (match, ignored, off) => {
             if (found) {
@@ -141,30 +144,24 @@ export function checklistSyntax(elem, postDecorator) {
           }
         );
 
-          const save = postModel.save({
+        await postModel.save({
           raw: newRaw,
           edit_reason: I18n.t("checklist.edit_reason"),
         });
 
-          if (save && save.then) {
-            save
-              .then(() => {
         postWidget.attrs.isSaving = false;
         postWidget.scheduleRerender();
-              })
-              .finally(() => removeReadonlyClass(boxes));
-          } else {
+      } finally {
         removeReadonlyClass(boxes);
       }
-        })
-        .catch(() => removeReadonlyClass(boxes));
     };
   });
 }
 
 export default {
   name: "checklist",
-  initialize: function () {
+
+  initialize() {
     withPluginApi("0.1", (api) => initializePlugin(api));
   },
 };

plugins/checklist/config/locales/server.en.yml

@@ -1,3 +1,3 @@
 en:
   site_settings:
-    checklist_enabled: 'Enable checklist plugin?'
+    checklist_enabled: "Enable checklist plugin?"

plugins/checklist/test/javascripts/lib/checklist-test.js

@@ -11,8 +11,10 @@ async function prepare(raw) {
   const cooked = await cookAsync(raw, {
     siteSettings: { checklist_enabled: true },
   });
+
+  const widget = { attrs: {}, scheduleRerender() {} };
   const model = Post.create({ id: 42, can_edit: true });
-  const decoratorHelper = { getModel: () => model };
+  const decoratorHelper = { widget, getModel: () => model };
 
   const $elem = $(`<div>${cooked.string}</div>`);
   checklistSyntax($elem[0], decoratorHelper);
@@ -20,7 +22,7 @@ async function prepare(raw) {
   currentRaw = raw;
 
   const updated = new Promise((resolve) => {
-    model.save = (fields) => resolve(fields.raw);
+    model.save = async (fields) => resolve(fields.raw);
   });
 
   return [$elem, updated];