decidim-decidim_awesome 0.10.1 → 0.11.1

data/app/models/decidim/decidim_awesome/proposal_extra_field.rb

@@ -2,10 +2,44 @@
 
 module Decidim
   module DecidimAwesome
+    # This class adds some attributes to the proposal model in a different table
+    # in particular, it adds a private_body field that should be encrypted
+    # private_body is not translatable, nor is intended to be as it won't be shown to the public
     class ProposalExtraField < ApplicationRecord
+      include Decidim::RecordEncryptor
+
       self.table_name = "decidim_awesome_proposal_extra_fields"
 
-      belongs_to :proposal, foreign_key: "decidim_proposal_id", class_name: "Decidim::Proposals::Proposal"
+      belongs_to :proposal, foreign_key: "decidim_proposal_id", foreign_type: "decidim_proposal_type", polymorphic: true
+
+      encrypt_attribute :private_body, type: :string
+
+      after_initialize :store_private_body
+      before_save :update_private_body_updated_at
+
+      # validate not more than one extra field can be associated to a proposal
+      # validates :proposal, uniqueness: true
+      validate :no_more_than_one_extra_field
+
+      private
+
+      def store_private_body
+        @initial_private_body = private_body
+      end
+
+      # using private_body_changed? does not sufice as the encrypted value is always updated on saving
+      def update_private_body_updated_at
+        if private_body != @initial_private_body
+          self.private_body_updated_at = Time.current
+          @initial_private_body = private_body
+        end
+      end
+
+      def no_more_than_one_extra_field
+        return unless ProposalExtraField.where(proposal:).where.not(id:).exists?
+
+        errors.add(:proposal, :invalid)
+      end
     end
   end
 end

data/app/models/decidim/decidim_awesome/vote_weight.rb

@@ -12,7 +12,7 @@ module Decidim
       after_save :update_vote_weight_totals!
 
       def update_vote_weight_totals!
-        extra = Decidim::DecidimAwesome::ProposalExtraField.find_or_initialize_by(proposal: proposal)
+        extra = Decidim::DecidimAwesome::ProposalExtraField.find_or_initialize_by(proposal:)
         extra.vote_weight_totals = extra.vote_weight_totals || {}
 
         prev = weight_previous_change&.first
@@ -20,7 +20,7 @@ module Decidim
           extra.vote_weight_totals[prev.to_s] = Decidim::DecidimAwesome::VoteWeight.where(vote: proposal.votes, weight: prev).count
           extra.vote_weight_totals.delete(prev.to_s) if extra.vote_weight_totals[prev.to_s].zero?
         end
-        extra.vote_weight_totals[weight.to_s] = Decidim::DecidimAwesome::VoteWeight.where(vote: proposal.votes, weight: weight).count
+        extra.vote_weight_totals[weight.to_s] = Decidim::DecidimAwesome::VoteWeight.where(vote: proposal.votes, weight:).count
         extra.vote_weight_totals.delete(weight.to_s) if extra.vote_weight_totals[weight.to_s].zero?
         extra.weight_total = extra.vote_weight_totals.inject(0) { |sum, (weight, count)| sum + (weight.to_i * count) }
         extra.save!

data/app/overrides/decidim/proposals/admin/proposals/show/add_private_body.html.erb.deface

@@ -0,0 +1,7 @@
+<!-- replace "erb[loud]:contains('simple_format(present(proposal).body(strip_tags: true))')" -->
+
+<% if awesome_proposal_custom_fields.blank? %>
+  <%= simple_format(present(proposal).body(strip_tags: true)) %>
+<% else %>
+  <%= render_proposal_body(proposal) %>
+<% end %>

data/app/overrides/decidim/proposals/admin/proposals/show/replace_body.html.erb.deface

@@ -0,0 +1,5 @@
+<!-- insert_before "erb[silent]:contains('presented_endorsers = endorsers_presenters_for(proposal)')" -->
+
+<% unless awesome_proposal_private_custom_fields.blank? %>
+  <%= render partial: "decidim/decidim_awesome/admin/proposals/private_body", locals: { proposal: proposal } %>
+<% end %>

data/app/overrides/decidim/proposals/proposals/_proposal_aside/limit_amendments_modal.html.erb.deface

@@ -0,0 +1,5 @@
+<!-- replace "erb[loud]:contains('amend_button_for @proposal')" -->
+
+<%= amend_button_for @proposal %>
+
+<%= render "decidim/decidim_awesome/amendments/modal" if @proposal.emendations.not_hidden.where(decidim_amendments: { state: Decidim::Amendment.states["evaluating"] }).count.positive? && @proposal.amendable? %>

data/app/overrides/decidim/proposals/proposals/_vote_button/replace_vote_button.html.erb.deface

@@ -1,4 +1,4 @@
-<!-- surround_contents "div.button--vote-button" -->
+<!-- surround_contents "div[data-erb-id^=proposal-]" -->
 
 <% if view = awesome_voting_manifest_for(current_component)&.show_vote_button_view %>
   <%= render view, local_assigns if view.present? %>

data/app/overrides/layouts/decidim/_decidim_javascript/add_awesome_tags.html.erb.deface

@@ -0,0 +1,6 @@
+<!-- insert_after "erb[loud]:contains('layouts/decidim/js_configuration')" -->
+
+<%= render partial: "layouts/decidim/decidim_awesome/awesome_config" %>
+<% if show_public_intergram? %>
+  <%= render partial: "layouts/decidim/decidim_awesome/intergram_widget", locals: { settings: organization_awesome_config[:intergram_for_public_settings] } %>
+<% end %>

data/app/overrides/layouts/decidim/_head/add_awesome_tags.html.erb.deface

@@ -1,14 +1,7 @@
-<!-- insert_before "erb[loud]:contains('organization_colors')" -->
+<!-- insert_after "erb[loud]:contains('append_stylesheet_pack_tag')" -->
 
-<%= stylesheet_pack_tag "decidim_decidim_awesome", media: "all" %>
+<% append_stylesheet_pack_tag "decidim_decidim_awesome", media: "all" %>
 <%= render(partial: "layouts/decidim/decidim_awesome/custom_styles") if awesome_custom_styles.present? %>
 
-<%= render partial: "layouts/decidim/decidim_awesome/awesome_config" %>
-<%# This will render scripts only on Decidim 0.27 %>
-<% content_for :js_content do %>
-  <%= javascript_pack_tag "decidim_decidim_awesome", defer: false %>
-  <%= javascript_pack_tag("decidim_decidim_awesome_custom_fields") if Decidim::DecidimAwesome.enabled?(:proposal_custom_fields) %>
-  <% if show_public_intergram? %>
-    <%= render partial: "layouts/decidim/decidim_awesome/intergram_widget", locals: { settings: organization_awesome_config[:intergram_for_public_settings] } %>
-  <% end %>
-<% end %>
+<% append_javascript_pack_tag "decidim_decidim_awesome", defer: false %>
+<% append_javascript_pack_tag("decidim_decidim_awesome_custom_fields") if Decidim::DecidimAwesome.enabled?(:proposal_custom_fields) %>

data/app/overrides/layouts/decidim/admin/_header/add_awesome_tags.html.erb.deface

@@ -0,0 +1,9 @@
+<!-- insert_after "erb[loud]:contains('append_stylesheet_pack_tag')" -->
+
+<%= render partial: "layouts/decidim/decidim_awesome/awesome_config" %>
+<% append_stylesheet_pack_tag("decidim_admin_decidim_awesome_global") %>
+<% append_javascript_pack_tag("decidim_admin_decidim_awesome_global") %>
+<% append_javascript_pack_tag("decidim_decidim_awesome_custom_fields") if Decidim::DecidimAwesome.enabled?(:proposal_custom_fields) %>
+<% if awesome_config[:intergram_for_admins] %>
+  <%= render partial: "layouts/decidim/decidim_awesome/intergram_widget", locals: { settings: organization_awesome_config[:intergram_for_admins_settings] } %>
+<% end %>

data/app/packs/entrypoints/decidim_admin_decidim_awesome.js

@@ -1,6 +1,5 @@
+// DO NOT include any javascript file here, but inside the following file instead
 import "src/decidim/decidim_awesome/awesome_admin";
-// This is needed by custom fields builder but if loader there duplicates the jQuery inclusion
-import "jquery-ui/ui/widgets/sortable";
 
 // CSS
 import "entrypoints/decidim_admin_decidim_awesome.scss";

data/app/packs/entrypoints/decidim_admin_decidim_awesome_global.js

@@ -0,0 +1,4 @@
+import "src/decidim/decidim_awesome/awesome_admin_global";
+
+// CSS
+import "entrypoints/decidim_admin_decidim_awesome_global.scss";

data/app/packs/entrypoints/decidim_admin_decidim_awesome_global.scss

@@ -0,0 +1 @@
+@import "stylesheets/decidim/decidim_awesome/awesome_admin_global";

data/app/packs/entrypoints/decidim_decidim_awesome.js

@@ -1,9 +1,9 @@
 import "src/decidim/decidim_awesome/awesome_application.js"
 
-// Images
+// // Images
 require.context("../images", true)
 
-// CSS
+// // CSS
 import "entrypoints/decidim_decidim_awesome.scss";
 
 

data/app/packs/entrypoints/decidim_decidim_awesome_map.scss

@@ -1 +1 @@
-@import "stylesheets/decidim/decidim_awesome/awesome_map/map"
+@import "stylesheets/decidim/decidim_awesome/awesome_map/map";

data/app/packs/entrypoints/decidim_editor.js

@@ -0,0 +1,14 @@
+import createEditor from "src/decidim/decidim_awesome/editor";
+import DecidimKit from "src/decidim/editor/extensions/decidim_kit";
+
+// CSS
+import "stylesheets/decidim/editor.scss"
+
+window.DecidimKit = DecidimKit;
+window.currentEditors = window.currentEditors || [];
+
+window.createEditor = (container) => {
+  let editor = createEditor(container);
+  window.currentEditors.push(editor);
+  return editor;
+}

data/app/packs/src/decidim/decidim_awesome/admin/auto_edit.js

@@ -1,82 +1,109 @@
-$(() => {
+document.addEventListener("DOMContentLoaded", () => {
   let CustomFieldsBuilders = window.CustomFieldsBuilders || [];
 
-  $("body").on("click", "a.awesome-auto-edit", (ev) => {
-    ev.preventDefault();
-    const $link = $(ev.currentTarget);
-    const scope = $link.data("scope");
-    const $target = $(`span.awesome-auto-edit[data-scope="${scope}"]`);
-    const $constraints = $(`.constraints-editor[data-key="${scope}"]`);
-    if ($target.length === 0) {
-      return;
-    }
+  document.querySelectorAll("a.awesome-auto-edit").forEach((link) => {
+    link.addEventListener("click", (ev) => {
+      ev.preventDefault();
+      const scope = link.dataset.scope;
+      const target = document.querySelector(`span.awesome-auto-edit[data-scope="${scope}"]`);
+      const constraints = document.querySelector(`.constraints-editor[data-key="${scope}"]`);
 
-    const key = $target.data("key");
-    const attribute = $target.data("var");
-    const $hidden = $(`[name="config[${attribute}][${key}]"]`);
-    const $multiple = $(`[name="config[${attribute}][${key}][]"]`);
-    const $container = $(`.${attribute}_container[data-key="${key}"]`);
-    const $delete = $(".delete-box", $container);
-
-    const rebuildLabel = (text, withScope) => {
-      $target.text(text);
-      $target.attr("data-key", text);
-      $target.data("key", text);
-      if (withScope) {
-        $target.attr("data-scope", withScope);
-        $target.data("scope", withScope);
-        $link.attr("data-scope", withScope);
-        $link.data("scope", withScope);
+      if (!target) {
+        return;
       }
-      $link.show();
-    };
 
-    const rebuildHmtl = (result) => {
-      rebuildLabel(result.key, result.scope);
-      $constraints.replaceWith(result.html);
-      // update hidden input if exists
-      $hidden.attr("name", `config[${attribute}][${result.key}]`);
-      $multiple.attr("name", `config[${attribute}][${result.key}][]`);
-      $container.data("key", result.key);
-      $container.attr("data-key", result.key);
-      $delete.attr("href", $delete.attr("href").replace(`key=${key}`, `key=${result.key}`))
-      CustomFieldsBuilders.forEach((builder) => {
-        if (builder.key === key) {
-          builder.key = result.key;
+      const key = target.dataset.key;
+      const attribute = target.dataset.var;
+      const inputField = document.querySelector(`[name="config[${attribute}][${key}]"]`);
+      const multipleField = document.querySelector(`[name="config[${attribute}][${key}][]"]`);
+      const container = document.querySelector(`.js-box-container[data-key="${key}"]`);
+      const deleteBox = container.querySelector(".awesome-auto-delete");
+
+      const rebuildLabel = (text, withScope) => {
+        target.innerText = text;
+        target.dataset.key = text;
+        if (withScope) {
+          target.dataset.scope = withScope;
+          link.dataset.scope = withScope;
         }
-      });
-    };
+        link.style.display = "";
+      };
+
+      const rebuildHtml = (result) => {
+        rebuildLabel(result.key, result.scope);
+        constraints.outerHTML = result.html;
+        if (inputField) {
+          inputField.setAttribute("name", `config[${attribute}][${result.key}]`);
+        }
+        if (multipleField) {
+          multipleField.setAttribute("name", `config[${attribute}][${result.key}][]`);
+        }
+        container.dataset.key = result.key;
+        container.setAttribute("data-key", result.key);
+        deleteBox.setAttribute("href", deleteBox.getAttribute("href").replace(`key=${key}`, `key=${result.key}`));
+        CustomFieldsBuilders.forEach((builder) => {
+          if (builder.key === key) {
+            builder.key = result.key;
+          }
+        });
+        // Reinitialize Decidim DOM events
+        // console.log("Reinitializing Decidim DOM events", "constraints", constraints, "container", container);
+        // Remove existing dialogs
+        Reflect.deleteProperty(window.Decidim.currentDialogs, `edit-modal-${scope}`);
+        Reflect.deleteProperty(window.Decidim.currentDialogs, `new-modal-${scope}`);
+        const editModal = document.getElementById(`edit-modal-${result.scope}`);
+        const newModal = document.getElementById(`new-modal-${result.scope}`);
+        if (container) {
+          // reloads dialogs (modals)
+          document.dispatchEvent(new CustomEvent("ajax:loaded", { detail: container }));
+        }
+        // Rebuild the manual handling of remote modals
+        document.dispatchEvent(new CustomEvent("ajax:loaded:modals", { detail: [editModal, newModal] }));
+      };
 
-    $target.html(`<input class="awesome-auto-edit" data-scope="${scope}" type="text" value="${key}">`);
-    const $input = $(`input.awesome-auto-edit[data-scope="${scope}"]`);
-    $link.hide();
-    $input.select();
-    $input.on("keypress", (evt) => {
-      if (evt.code === "Enter" || evt.code === "13" || evt.code === "10") {
-        evt.preventDefault();
-        $.ajax(
-          {
-            type: "POST",
-            url: window.DecidimAwesome.rename_scope_label_path,
-            dataType: "json",
+      target.innerHTML = `<input class="awesome-auto-edit" data-scope="${scope}" type="text" size="${key.length}" value="${key}">`;
+      const input = target.querySelector(`input.awesome-auto-edit[data-scope="${scope}"]`);
+      link.style.display = "none";
+      input.focus();
+      let config = {};
+      config[attribute] = true;
+      let token = document.querySelector('meta[name="csrf-token"]');
+      input.addEventListener("keypress", (evt) => {
+        if (evt.key === "Enter" || evt.keyCode === 13 || evt.keyCode ===  10) {
+          if (key === input.value) {
+            rebuildLabel(key);
+            return;
+          }
+          // console.log("Saving key", key, "to", input.value, "with scope", scope);
+          evt.preventDefault();
+          fetch(window.DecidimAwesome.renameScopeLabelPath, {
+            method: "POST",
             headers: {
-              "X-CSRF-Token": $("meta[name=csrf-token]").attr("content")
+              "Accept": "application/json, text/plain, */*",
+              "Content-Type": "application/json",
+              "X-CSRF-Token": token && token.getAttribute("content")
             },
-            data: { key: key,
-              scope: scope,
-              attribute: attribute,
-              text: $input.val()
-            }
+            body: JSON.stringify({ key: key, scope: scope, attribute: attribute, text: input.value, config: config })
           }).
-          done((result) => rebuildHmtl(result)).
-          fail((err) => {
-            console.error("Error saving key", key, "ERR:", err);
-            rebuildLabel(key);
-          });
-      }
-    });
-    $input.on("blur", () => {
-      rebuildLabel(key);
+            then((response) => {
+              if (!response.ok) {
+                throw response;
+              }
+              return response.json()
+            }).
+            then((result) => {
+              rebuildHtml(result)
+            }).
+            catch((err) => {
+              console.error("Error saving key", key, "ERR:", err);
+              rebuildLabel(key);
+            });
+        }
+      });
+
+      input.addEventListener("blur", () => {
+        rebuildLabel(key);
+      });
     });
   });
 });

data/app/packs/src/decidim/decidim_awesome/admin/check_redirections.js

@@ -1,48 +1,53 @@
-$(() => {
-  $(".check-custom-redirections").on("click", (evt) => {
-    evt.preventDefault();
-    
-    if ($(evt.target).hasClass("disabled")) {
-      return;
-    }
-    
-    $(evt.target).addClass("disabled");
-
-    const getReport = (tr, response) => {
-      const item = $(tr).data("item");
-      const $td = $(tr).find(".redirect-status");
-
-      let type = response.type;
-      let status = response.status;
-      if (response.type === "opaqueredirect") {
-        type = "redirect";
-        status = "302";
+document.addEventListener("DOMContentLoaded", () => {
+  const checkCustomRedirections = document.querySelector(".check-custom-redirections");
+
+  if (checkCustomRedirections) {
+    checkCustomRedirections.addEventListener("click", (evt) => {
+      evt.preventDefault();
+
+      if (evt.target.classList.contains("disabled")) {
+        return;
       }
 
-      if (item.active) {
-        if (type ===  "redirect") {
-          $td.addClass("success");
+      evt.target.classList.add("disabled");
+
+      const getReport = (tr, response) => {
+        const item = JSON.parse(tr.dataset.item);
+        const td = tr.querySelector(".redirect-status");
+
+        let type = response.type;
+        let status = response.status;
+        if (response.type === "opaqueredirect") {
+          type = "redirect";
+          status = "302";
+        }
+
+        if (item.active) {
+          if (type === "redirect") {
+            td.classList.add("text-success");
+          } else {
+            td.classList.add("text-alert");
+          }
         } else {
-          $td.addClass("alert");
+          td.classList.add("text-gray");
         }
-      } else {
-        $td.addClass("muted");
-      }
 
-      return `${type} (${status})`;
-    };
-
-    $("tr.custom-redirection").each((index, tr) => {
-      const $td = $(tr).find(".redirect-status");
-      $td.html('<span class="loading-spinner" />');
-      fetch($(tr).data("origin"), {method: "HEAD", redirect: "manual"}).
-        then((response) => {
-          $td.html(getReport(tr, response))
-        }).
-        catch((error) => {
-          console.error("ERROR", error)  
-          $td.removeClass("loading");
-        });
+        return `${type} (${status})`;
+      };
+
+      document.querySelectorAll("tr.custom-redirection").forEach((tr) => {
+        const td = tr.querySelector(".redirect-status");
+        td.innerHTML = '<span class="loading-spinner"></span>';
+
+        fetch(tr.dataset.origin, { method: "HEAD", redirect: "manual" }).
+          then((response) => {
+            td.innerHTML = getReport(tr, response);
+          }).
+          catch((error) => {
+            console.error("ERROR", error);
+            td.classList.remove("loading");
+          });
+      });
     });
-  });
+  }
 });

data/app/packs/src/decidim/decidim_awesome/admin/codemirror.js

@@ -1,10 +1,10 @@
 import CodeMirror from "codemirror"
 import "codemirror/mode/css/css"
 import "codemirror/keymap/sublime"
-import "stylesheets/decidim/decidim_awesome/admin/codemirror.scss";
+import "codemirror/lib/codemirror.css";
 
-$(() => {
-  $(".awesome-edit-config .scoped_styles_container textarea").each((_idx, el) => {
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".awesome-edit-config .scoped_styles_container textarea").forEach((el) => {
     CodeMirror.fromTextArea(el, {
       lineNumbers: true,
       mode: "css",

data/app/packs/src/decidim/decidim_awesome/admin/constraint_form_events.js

@@ -0,0 +1,115 @@
+/* eslint no-use-before-define: "off" */
+
+// This script manually handles the "edit" button from the constraints editor by loading the content into the modal after the modal (operated by Dialog) is opened.
+// We don't use the RemoteModal class because it chaches the modal content and the "fetch" operation does not specify the "no-cache" headers.
+
+const fetchConstraints = (url, callback = () => {}) => {
+  fetch(url, { cache: "no-cache" }).
+    then((res) => {
+      if (!res.ok) {
+        throw res;
+      }
+      return res.text();
+    }).
+    then((text) => {
+      callback(text);
+    }).
+    catch((err) => {
+      console.error("dialog open failed", err);
+    });
+};
+
+const renderModal = (element, html) => {
+  element.innerHTML = html;
+  bindModalEvents(element)
+};
+
+const constraintChange = (modalId, data) => {
+  const modal = window.Decidim.currentDialogs[modalId];
+  const constraintsUrl = modal.openingTrigger.dataset.constraintsUrl;
+
+  // Prepare parameters to request the modal content again, but updated based on the user selections
+  const vars = data.map((setting) => `${setting.key}=${setting.value}`);
+  const url = `${constraintsUrl}&${vars.join("&")}`;
+
+  fetchConstraints(url, (res) => renderModal(modal.dialog, res));
+};
+
+const bindModalEvents = (detail) => {
+  const div = detail.querySelector("[id^=constraint-form]");
+  const spaceManifest = div.getElementsByTagName("select")[0];
+  const spaceSlug = div.getElementsByTagName("select")[1];
+  const componentManifest = div.getElementsByTagName("select")[2];
+  const componentId = div.getElementsByTagName("select")[3];
+
+  spaceManifest.addEventListener("change", (event) => {
+    constraintChange(detail.id, [{
+      key: "participatory_space_manifest",
+      value: event.target.value
+    }])
+  });
+
+  spaceSlug.addEventListener("change", (event) => {
+    constraintChange(detail.id, [{
+      key: "participatory_space_manifest",
+      value: spaceManifest.value
+    }, {
+      key: "participatory_space_slug",
+      value: event.target.value
+    }])
+  });
+
+  // Component manfiest and component id are mutually exclusive
+  componentManifest.addEventListener("change", (event) => {
+    if (event.target.value) {
+      componentId.value = "";
+    }
+  });
+
+  componentId.addEventListener("change", (event) => {
+    if (event.target.value) {
+      componentManifest.value = "";
+    }
+  });
+};
+
+
+const initializeDialog = (dialog) => {
+  dialog.addEventListener("open.dialog", async (el) => {
+    const currentDialog = window.Decidim.currentDialogs[el.target.id];
+    const button = currentDialog && currentDialog.openingTrigger;
+    const url = button.dataset.constraintsUrl;
+    // console.log("open.dialog", el, url, "currentDialog",currentDialog);
+    fetchConstraints(url, (res) => renderModal(el.target, res));
+  });
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll("[data-constraint][data-dialog]").forEach((dialog) => {
+    initializeDialog(dialog);
+  });
+});
+
+document.addEventListener("ajax:loaded:modals", (event) => {
+  event.detail.forEach((modal) => initializeDialog(modal));
+});
+
+// Rails AJAX events, this will update the parent page constrains
+document.body.addEventListener("ajax:error", (responseText) => {
+  // console.log("ajax:error", responseText)
+  const container = document.querySelector(`.constraints-editor[data-key="${responseText.detail[0].key}"]`);
+  const callout = container.querySelector(".flash");
+  callout.hidden = false;
+  callout.classList.add("alert");
+  callout.getElementsByTagName("p")[0].innerHTML = `${responseText.detail[0].message}: <strong>${responseText.detail[0].error}</strong>`;
+});
+
+document.body.addEventListener("ajax:success", (responseText) => {
+  // console.log("ajax:success", responseText)
+  let container = document.querySelector(`.constraints-editor[data-key="${responseText.detail[0].key}"]`);
+  const callout = container.querySelector(".flash");
+  callout.hidden = false;
+  callout.classList.add("success");
+  callout.getElementsByTagName("p")[0].innerHTML = responseText.detail[0].message;
+  container.outerHTML = responseText.detail[0].html;
+});

data/app/packs/src/decidim/decidim_awesome/admin/custom_fields_builder.js

@@ -1,21 +1,26 @@
-require("formBuilder/dist/form-builder.min.js")
+import "formBuilder/dist/form-builder.min.js";
 import "src/decidim/decidim_awesome/forms/rich_text_plugin"
+// formBuilder uses jquery-ui-sortable which is a very dirty npm package with no neat source code available, and causes problems with the webpacker configuration of Decidim.
+// For the moment, we'll remove the sortable functionality with a dummy jQuery plugin until we find another sortable plugin (or keep it disabled for good)
+jQuery.fn.sortable = () => {}
 
 window.CustomFieldsBuilders = window.CustomFieldsBuilders || [];
 
 $(() => {
   $(".awesome-edit-config .proposal_custom_fields_editor").each((_idx, el) => {
     const key = $(el).closest(".proposal_custom_fields_container").data("key");
+    const configVar = $(el).closest(".proposal_custom_fields_container").data("var");
     // DOCS: https://formbuilder.online/docs
     window.CustomFieldsBuilders.push({
       el: el,
       key: key,
+      var: configVar,
       config: {
         i18n: {
           locale: "en-US",
           location: "https://cdn.jsdelivr.net/npm/formbuilder-languages@1.1.0/"
         },
-        formData: $(`input[name="config[proposal_custom_fields][${key}]"]`).val(),
+        formData: $(`input[name="config[${configVar}][${key}]"]`).val(),
         disableFields: ["button", "file"],
         disabledActionButtons: ["save", "data", "clear"],
         disabledAttrs: [
@@ -37,7 +42,7 @@ $(() => {
         ],
         disabledSubtypes: {
           // default color as it generate hashtags in decidim (TODO: fix hashtag generator with this)
-          text: ["color"], 
+          text: ["color"],
           // disable default wysiwyg editors as they present problems
           textarea: ["tinymce", "quill"]
         }
@@ -71,8 +76,7 @@ $(() => {
 
   $("form.awesome-edit-config").on("submit", () => {
     window.CustomFieldsBuilders.forEach((builder) => {
-      $(`input[name="config[proposal_custom_fields][${builder.key}]"]`).val(builder.instance.actions.getData("json"));
+      $(`input[name="config[${builder.var}][${builder.key}]"]`).val(builder.instance.actions.getData("json"));
     });
   });
 });
-