Merge pull request #1831 from codidact/0valt/caching

Remove draft deletion via AJAX before post submit

Author: Oaphi

app/assets/javascripts/posts.js

@@ -2,9 +2,9 @@
 const IGNORE_UNSUPPORTED = [Comment, HTMLBodyElement];
 
 $(() => {
-  DOMPurify.addHook("uponSanitizeAttribute", (node, event) => {
-    const rowspan = node.getAttribute("rowspan");
-    const colspan = node.getAttribute("colspan");
+  DOMPurify.addHook('uponSanitizeAttribute', (node, event) => {
+    const rowspan = node.getAttribute('rowspan');
+    const colspan = node.getAttribute('colspan');
 
     if (rowspan && Number.isNaN(+rowspan)) {
       event.keepAttr = false;
@@ -29,7 +29,7 @@ $(() => {
    */
   const stringInsert = (str, idx, insert) => str.slice(0, idx) + insert + str.slice(idx);
 
-  const placeholder = "![Uploading, please wait...]()";
+  const placeholder = '![Uploading, please wait...]()';
 
   $uploadForm.find('input[type="file"]').on('change', async (evt) => {
     /** @type {HTMLInputElement} */
@@ -39,7 +39,7 @@ $(() => {
 
     postField.value = stringInsert(postText, cursorPos, placeholder);
 
-    $uploadForm.trigger('submit')
+    $uploadForm.trigger('submit');
   });
 
   QPixel.DOM?.watchClass('#markdown-image-upload.is-active', (target) => {
@@ -67,7 +67,8 @@ $(() => {
 
       if (!isUploadModalOpened) {
         QPixel.createNotification('danger', `Can't upload files with size more than 2MB`);
-      } else {
+      }
+      else {
         $tgt.find('.js-max-size').addClass('has-color-red-700 error-shake');
         setTimeout(() => {
           $tgt.find('.js-max-size').removeClass('error-shake');
@@ -82,7 +83,7 @@ $(() => {
 
     const resp = await fetch($tgt.attr('action'), {
       method: $tgt.attr('method'),
-      body: new FormData(/** @type {HTMLFormElement} */ ($tgt[0]))
+      body: new FormData(/** @type {HTMLFormElement} */ ($tgt[0])),
     });
 
     const data = await resp.json();
@@ -104,7 +105,7 @@ $(() => {
     $postField.val(postText.replace(placeholder, `![Image_alt_text](${data.link})`));
     $tgt.parents('.modal').removeClass('is-active');
 
-    $postFields.trigger('change')
+    $postFields.trigger('change');
   });
 
   $uploadForm.on('ajax:failure', async (evt, data) => {
@@ -168,13 +169,20 @@ $(() => {
    * @returns {Promise<boolean>}
    */
   const deleteDraft = async ($field) => {
-    const data = await QPixel.deleteDraft();
+    // TODO: extra error handling should be moved to QPixel#deleteDraft
+    try {
+      const data = await QPixel.deleteDraft();
 
-    return QPixel.handleJSONResponse(data, () => {
-      flashDraftStatus($field, 'draft deleted');
-      removeDraftLoadedNotice();
-    });
-  }
+      return QPixel.handleJSONResponse(data, () => {
+        flashDraftStatus($field, 'draft deleted');
+        removeDraftLoadedNotice();
+      });
+    }
+    catch (error) {
+      QPixel.createNotification('danger', `Failed to delete post draft`);
+      return false;
+    }
+  };
 
   /**
    * Helper for getting draft-related elements from a given event target
@@ -204,7 +212,7 @@ $(() => {
 
     const $licenseField = $form.find('.js-license-select');
     const $excerptField = $form.find('.js-tag-excerpt');
-    
+
     const $tagsField = $form.find('#post_tags_cache');
     const $titleField = $form.find('#post_title');
     const $commentField = $form.find('#edit_comment');
@@ -224,7 +232,7 @@ $(() => {
       comment: commentText,
       excerpt: excerptText,
       license: license,
-      tags: Array.isArray(tags) ? tags: [],
+      tags: Array.isArray(tags) ? tags : [],
       tag_name: tagName,
       title: titleText,
     };
@@ -269,7 +277,7 @@ $(() => {
     const eventData = /** @type {ClipboardEvent} */ (evt.originalEvent);
     if (eventData.clipboardData.files.length > 0) {
       // must be called to prevent raw file name to be inserted after the placeholder
-      evt.preventDefault()
+      evt.preventDefault();
 
       /** @type {JQuery<HTMLInputElement>} */
       const $fileInput = $uploadForm.find('input[type="file"]');
@@ -278,53 +286,79 @@ $(() => {
     }
   });
 
-  $postFields.on('focus keyup paste change markdown', (() => {
+  const onPostFieldChange = (() => {
+    /** @type {string | null} */
     let previous = null;
+
+    /**
+     * @param {JQuery.EventBase} evt
+     */
     return (evt) => {
       const $tgt = $(evt.target);
       const text = $(evt.target).val();
+
       // Don't bother re-rendering if nothing's changed
-      if (text === previous) { return; }
+      if (text === previous) {
+        return;
+      }
+
       previous = text;
+
       if (!window.converter) {
         window.converter = window.markdownit({
           html: true,
           breaks: false,
-          linkify: true
+          linkify: true,
         });
         window.converter.use(window.markdownitFootnote);
         window.converter.use(window.latexEscape);
       }
+
       window.setTimeout(() => {
         const converter = window.converter;
         const unsafe_html = converter.render(text);
         const html = DOMPurify.sanitize(unsafe_html, {
           ALLOWED_TAGS: QPixel.ALLOWED_POST_TAGS,
-          ALLOWED_ATTR: QPixel.ALLOWED_POST_ATTRS
+          ALLOWED_ATTR: QPixel.ALLOWED_POST_ATTRS,
         });
 
-        const removedElements = [...new Set(DOMPurify.removed
-          .filter((entry) => entry.element && !IGNORE_UNSUPPORTED.some((ctor) => entry.element instanceof ctor))
-          .map((entry) => entry.element.localName))];
-
-        const removedAttributes = [...new Set(DOMPurify.removed
-          .filter((entry) => entry.attribute)
-          .map((entry) => [
-            entry.attribute.name + (entry.attribute.value ? `='${entry.attribute.value}'` : ''),
-            entry.from.localName
-          ]))]
-
-        $tgt.parents('form')
+        const removedElements = [
+          ...new Set(
+            DOMPurify.removed
+              .filter((entry) => entry.element && !IGNORE_UNSUPPORTED.some((ctor) => entry.element instanceof ctor))
+              .map((entry) => entry.element.localName),
+          ),
+        ];
+
+        const removedAttributes = [
+          ...new Set(
+            DOMPurify.removed
+              .filter((entry) => entry.attribute)
+              .map((entry) => [
+                entry.attribute.name + (entry.attribute.value ? `='${entry.attribute.value}'` : ''),
+                entry.from.localName,
+              ]),
+          ),
+        ];
+
+        $tgt
+          .parents('form')
           .find('.rejected-elements')
           .toggleClass('hide', removedElements.length === 0 && removedAttributes.length === 0)
           .find('ul')
           .empty()
           .append(
             removedElements.map((name) => $(`<li><code>&lt;${name}&gt;</code></li>`)),
-            removedAttributes.map(([attr, elName]) => $(`<li><code>${attr}</code> (in <code>&lt;${elName}&gt;</code>)</li>`)));
+            removedAttributes.map(([attr, elName]) =>
+              $(`<li><code>${attr}</code> (in <code>&lt;${elName}&gt;</code>)</li>`),
+            ),
+          );
 
         $tgt.parents('.form-group').siblings('.post-preview').html(html);
-        $tgt.parents('form').find('.js-post-html[name="__html"]').val(html + '<!-- g: js, mdit -->');
+        $tgt
+          .parents('form')
+          .find('.js-post-html[name="__html"]')
+          .val(html + '<!-- g: js, mdit -->');
       }, 0);
 
       if (featureTimeout) {
@@ -340,79 +374,60 @@ $(() => {
         }
       }, 1000);
     };
-  })()).trigger('markdown');
+  })();
+
+  $postFields.on('focus keyup paste change markdown', onPostFieldChange).trigger('markdown');
 
   $postFields.parents('form').on('submit', async (ev) => {
     const $tgt = $(ev.target);
     const $field = $tgt.find('.js-post-field');
 
-    const draftDeleted = $tgt.attr('data-draft-deleted') === 'true';
     const isValidated = $tgt.attr('data-validated') === 'true';
 
-    if (draftDeleted && isValidated) {
+    if (isValidated) {
       return;
     }
 
     ev.preventDefault();
 
-    // Draft handling
-    if (!draftDeleted) {
-      const status = await deleteDraft($field);
-
-      if (status) {
-        $tgt.attr('data-draft-deleted', 'true');
-
-        if (isValidated) {
-          $tgt.submit();
-        }
-      }
-      else {
-        QPixel.createNotification('danger', `Failed to delete post draft. (${status})`);
-      }
+    const text = $field.val()?.toString();
+    const validated = QPixel.validatePost(text);
+    if (validated[0] === true) {
+      $tgt.attr('data-validated', 'true');
+      $tgt.submit();
     }
-
-
-    // Validation
-    if (!isValidated) {
-      const text = $field.val()?.toString();
-      const validated = QPixel.validatePost(text);
-      if (validated[0] === true) {
-        $tgt.attr('data-validated', 'true');
-        $tgt.submit();
+    else {
+      const warnings = validated[1].filter((x) => x['type'] === 'warning');
+      const errors = validated[1].filter((x) => x['type'] === 'error');
+
+      if (warnings.length > 0) {
+        const $warningBox = $(`<div class="notice is-warning"></div>`);
+        const $warningList = $(`<ul></ul>`);
+        warnings.forEach((w) => {
+          $warningList.append(`<li>${w['message']}</li>`);
+        });
+        $warningBox.append($warningList);
+        $tgt.find('input[type="submit"]').before($warningBox);
       }
-      else {
-        const warnings = validated[1].filter((x) => x['type'] === 'warning');
-        const errors = validated[1].filter((x) => x['type'] === 'error');
-
-        if (warnings.length > 0) {
-          const $warningBox = $(`<div class="notice is-warning"></div>`);
-          const $warningList = $(`<ul></ul>`);
-          warnings.forEach((w) => {
-            $warningList.append(`<li>${w['message']}</li>`);
-          });
-          $warningBox.append($warningList);
-          $tgt.find('input[type="submit"]').before($warningBox);
-        }
 
-        if (errors.length > 0) {
-          const $errorBox = $(`<div class="notice is-danger"></div>`);
-          const $errorList = $(`<ul></ul>`);
-          errors.forEach((e) => {
-            $errorList.append(`<li>${e['message']}</li>`);
-          });
-          $errorBox.append($errorList);
-          $tgt.find('input[type="submit"]').before($errorBox);
-        }
-
-        if (warnings.length > 0 && errors.length === 0) {
-          $tgt.attr('data-validated', 'true');
-        }
+      if (errors.length > 0) {
+        const $errorBox = $(`<div class="notice is-danger"></div>`);
+        const $errorList = $(`<ul></ul>`);
+        errors.forEach((e) => {
+          $errorList.append(`<li>${e['message']}</li>`);
+        });
+        $errorBox.append($errorList);
+        $tgt.find('input[type="submit"]').before($errorBox);
       }
 
-      setTimeout(() => {
-        $tgt.find('input[type="submit"]').attr('disabled', null);
-      }, 1000);
+      if (warnings.length > 0 && errors.length === 0) {
+        $tgt.attr('data-validated', 'true');
+      }
     }
+
+    setTimeout(() => {
+      $tgt.find('input[type="submit"]').attr('disabled', null);
+    }, 1000);
   });
 
   $('.js-draft-loaded').each((_i, e) => {
@@ -423,36 +438,34 @@ $(() => {
   });
 
   const setCopyButtonState = ($button, state) => {
-    const isSuccess = state === "success";
-    const buttonClass = isSuccess ? "is-green" : "is-danger";
-    const iconClass = isSuccess ? "fa-check" : "fa-times";
+    const isSuccess = state === 'success';
+    const buttonClass = isSuccess ? 'is-green' : 'is-danger';
+    const iconClass = isSuccess ? 'fa-check' : 'fa-times';
 
-    const $icon = $button.find(".fa");
+    const $icon = $button.find('.fa');
 
-    $icon.removeClass("fa-copy");
+    $icon.removeClass('fa-copy');
     $icon.addClass(iconClass);
     $button.addClass(buttonClass);
 
     setTimeout(() => {
       $icon.removeClass(iconClass);
       $button.removeClass(buttonClass);
-      $icon.addClass("fa-copy");
+      $icon.addClass('fa-copy');
     }, 1e3);
   };
 
-  $(".js-permalink-trigger").removeAttr("hidden");
+  $('.js-permalink-trigger').removeAttr('hidden');
 
-  $(".js-permalink-copy").on("click", async (ev) => {
+  $('.js-permalink-copy').on('click', async (ev) => {
     ev.preventDefault();
 
     const $tgt = $(ev.target);
 
-    const $button = $tgt.hasClass("js-permalink-copy")
-      ? $tgt
-      : $tgt.parents(".js-permalink-copy");
+    const $button = $tgt.hasClass('js-permalink-copy') ? $tgt : $tgt.parents('.js-permalink-copy');
 
-    const postId = $button.data("post-id");
-    const linkType = $button.data("link-type");
+    const postId = $button.data('post-id');
+    const linkType = $button.data('link-type');
 
     if (!postId || !linkType) {
       return;
@@ -468,10 +481,10 @@ $(() => {
 
     try {
       await navigator.clipboard.writeText(url);
-      setCopyButtonState($button, "success");
+      setCopyButtonState($button, 'success');
     }
     catch (_e) {
-      setCopyButtonState($button, "error");
+      setCopyButtonState($button, 'error');
     }
   });
 

app/views/layouts/_head.html.erb

@@ -30,7 +30,7 @@
 <% if SiteSetting['DonationsEnabled'] && (SiteSetting['LoadStripeEverywhere'] || controller_name == 'donations') %>
   <%= javascript_include_tag "https://js.stripe.com/v3/" %>
 <% end %>
-<%= javascript_include_tag "https://cdn.jsdelivr.net/npm/dompurify@2.2.9/dist/purify.min.js" %>
+<%= javascript_include_tag "https://cdn.jsdelivr.net/npm/dompurify@2.5.8/dist/purify.min.js" %>
 <%= javascript_include_tag "/assets/community/#{@community.host.split('.')[0]}.js" %>
 <%= javascript_include_tag 'application' %>
 <script src="https://cdn.jsdelivr.net/npm/@codidact/co-design@latest/js/co-design.js" defer></script>