decidim-decidim_awesome 0.10.3 → 0.11.1

data/app/packs/src/decidim/decidim_awesome/awesome_map/controls_ui.js

@@ -14,10 +14,10 @@ export default class ControlsUI {
     });
 
     if (this.awesomeMap.config.hideControls) {
-      $(this.main.getContainer()).hide();
+      this.main.getContainer().style.display = "none";
     }
 
-    this.$loading = $("#awesome-map .loading-spinner");
+    this.loading = document.querySelector("#awesome-map .loading-spinner");
     this.onHashtag = this._orderHashtags;
 
     this.awesomeMap.map.on("overlayadd", () => {
@@ -38,8 +38,14 @@ export default class ControlsUI {
     $("#awesome-map").on("click", ".awesome_map-title-control", (evt) => {
       evt.preventDefault();
       evt.stopPropagation();
-      $("#awesome_map-categories-control").toggleClass("active");
-      $("#awesome_map-hashtags-control").toggleClass("active");
+      const categories = document.getElementById("awesome_map-categories-control");
+      const hashtags = document.getElementById("awesome_map-hashtags-control");
+      if (categories) {
+        categories.classList.toggle("active");
+      }
+      if (hashtags) {
+        hashtags.classList.toggle("active");
+      }
     });
 
     // hashtag events
@@ -60,11 +66,27 @@ export default class ControlsUI {
       $("#awesome-map .awesome_map-hashtags-selector").prop("checked", $("#awesome-map .awesome_map-hashtags-selector:checked").length < $("#awesome-map .awesome_map-hashtags-selector").length);
       this.updateHashtagLayers();
     });
+
+    this.awesomeMap.map.on("popupopen", () => {
+      // console.log("popup open");
+      // hide Controls
+      document.querySelector(".leaflet-control-layers.leaflet-control").style.display = "none";
+    });
+    this.awesomeMap.map.on("popupclose", () => {
+      // console.log("popup close");
+      // restore controls
+      document.querySelector(".leaflet-control-layers.leaflet-control").style.display = "block";
+    });
   }
 
   addSearchControls() {
-    $(this.main.getContainer()).contents("form").append(`<div id="awesome_map-categories-control" class="active"><b class="awesome_map-title-control">${window.DecidimAwesome.texts.categories}</b><div class="categories-container"></div></div>
-    <div id="awesome_map-hashtags-control"><b class="awesome_map-title-control">${window.DecidimAwesome.texts.hashtags}</b><div class="hashtags-container"></div><a href="#" class="awesome_map-toggle_all_tags">${window.DecidimAwesome.texts.select_deselect_all}</a></div>`);
+    const section = this.main.getContainer().querySelector(".leaflet-control-layers-list");
+    if (section) {
+      section.insertAdjacentHTML("beforeend", `<div id="awesome_map-categories-control" class="active"><b class="awesome_map-title-control">${window.DecidimAwesome.texts.categories}</b><div class="categories-container"></div></div>
+    <div id="awesome_map-hashtags-control"><b class="awesome_map-title-control">${window.DecidimAwesome.texts.hashtags}</b><div class="hashtags-container"></div><a href="#" class="awesome_map-toggle_all_tags">${window.DecidimAwesome.texts.selectDeselectAll}</a></div>`);
+    } else {
+      console.error("Can't find the section to insert the controls");
+    }
   }
 
   addCategoriesControls() {
@@ -76,7 +98,12 @@ export default class ControlsUI {
         group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
       };
       this.awesomeMap.layers[category.id].group.addTo(this.awesomeMap.map);
-      $("#awesome_map-categories-control .categories-container").append(`<label data-layer="${category.id}" class="awesome_map-category-${category.id}${category.parent ? " subcategory" : ""}" data-parent="${category.parent}"><input type="checkbox" class="awesome_map-categories-selector" checked><span>${label}</span></label>`);
+      const categories = document.querySelector("#awesome_map-categories-control .categories-container");
+      if (categories) {
+        categories.insertAdjacentHTML("beforeend", `<label data-layer="${category.id}" class="awesome_map-category-${category.id}${category.parent ? " subcategory" : ""}" data-parent="${category.parent}"><input type="checkbox" class="awesome_map-categories-selector" checked><span>${label}</span></label>`);
+      } else {
+        console.error("Can't find the section to insert the categories");
+      }
     })
 
     // category events
@@ -114,7 +141,7 @@ export default class ControlsUI {
   addHashtagsControls(hashtags, marker) {
     // show hashtag layer
     if (hashtags && hashtags.length) {
-      $("#awesome_map-hashtags-control").show();
+      document.getElementById("awesome_map-hashtags-control").style.display = "block";
       hashtags.forEach((hashtag) => {
         // Add layer if not exists, otherwise just add the marker to the group
         if (!this.awesomeMap.layers[hashtag.tag]) {
@@ -123,30 +150,34 @@ export default class ControlsUI {
             group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
           };
           this.awesomeMap.map.addLayer(this.awesomeMap.layers[hashtag.tag].group);
-          $("#awesome_map-hashtags-control .hashtags-container").append(`<label data-layer="${hashtag.tag}" class="awesome_map-hashtag-${hashtag.tag}"><input type="checkbox" class="awesome_map-hashtags-selector" checked><span>${hashtag.name}</span></label>`);
+          document.querySelector("#awesome_map-hashtags-control .hashtags-container").insertAdjacentHTML("beforeend", `<label data-layer="${hashtag.tag}" class="awesome_map-hashtag-${hashtag.tag}"><input type="checkbox" class="awesome_map-hashtags-selector" checked><span>${hashtag.name}</span></label>`);
           // Call a trigger, might be in service for customizations
           this.onHashtag(hashtag, $("#awesome_map-hashtags-control .hashtags-container"));
         }
         this.awesomeMap.layers[hashtag.tag].group.addLayer(marker);
 
-        const $label = $(`label.awesome_map-hashtag-${hashtag.tag}`);
+        const label = document.querySelector(`label.awesome_map-hashtag-${hashtag.tag}`);
         // update number of items
-        $label.attr("title", `${parseInt($label.attr("title") || 0, 10) + 1} ${window.DecidimAwesome.texts.items}`);
+        label.setAttribute("title", `${parseInt(label.title || 0, 10) + 1} ${window.DecidimAwesome.texts.items}`);
       });
     }
   }
 
   showCategory(cat) {
-    $("#awesome_map-categories-control").show();
+    document.getElementById("awesome_map-categories-control").style.display = "block";
     // show category if hidden
-    const $label = $(`label.awesome_map-category-${cat.id}`);
-    const $parent = $(`label.awesome_map-category-${cat.parent}`);
-    $label.show();
-    // update number of items
-    $label.attr("title", `${parseInt($label.attr("title") || 0, 10) + 1} ${window.DecidimAwesome.texts.items}`);
-    // show parent if apply
-    $parent.show();
-    $parent.attr("title", `${parseInt($parent.attr("title") || 0, 10) + 1} ${window.DecidimAwesome.texts.items}`);
+    const label = document.querySelector(`label.awesome_map-category-${cat.id}`);
+    const parent = document.querySelector(`label.awesome_map-category-${cat.parent}`);
+    if (label) {      
+      label.style.display = "block";
+      // update number of items
+      label.setAttribute("title", `${parseInt(label.title || 0, 10) + 1} ${window.DecidimAwesome.texts.items}`);
+    }
+    if (parent) {
+      // show parent if apply
+      parent.style.display = "block"
+      parent.setAttribute("title", `${parseInt(parent.title || 0, 10) + 1} ${window.DecidimAwesome.texts.items}`);
+    }
   }
 
   removeHiddenComponents() {

data/app/packs/src/decidim/decidim_awesome/awesome_map/load_map.js

@@ -1,6 +1,6 @@
 import AwesomeMap from "src/decidim/decidim_awesome/awesome_map/awesome_map"
 
-$(() => {
+document.addEventListener("DOMContentLoaded", () => {
   const sanitizeCenter = (string) => {
     if (string) {
       const parts = string.split(",")
@@ -15,31 +15,40 @@ $(() => {
     return null;
   };
 
+  const parse = (string) => {
+    if (!string) {
+      return null;
+    }
+    return JSON.parse(string);
+  }
+
+  const dataset = document.getElementById("awesome-map").dataset;
   const config = {
-    length: $("#awesome-map").data("truncate") || 254,
-    center: sanitizeCenter($("#awesome-map").data("map-center")),
-    zoom: $("#awesome-map").data("map-zoom"),    
+    length: parse(dataset.truncate) || 254,
+    center: sanitizeCenter(parse(dataset.mapCenter)),
+    zoom: parse(dataset.mapZoom),    
     menu: {
-      amendments: $("#awesome-map").data("menu-amendments"),
-      meetings: $("#awesome-map").data("menu-meetings"),
-      categories: $("#awesome-map").data("menu-categories"),
-      hashtags: $("#awesome-map").data("menu-hashtags"),
-      mergeComponents: $("#awesome-map").data("menu-merge-components")
+      amendments: parse(dataset.menuAmendments),
+      meetings: parse(dataset.menuMeetings),
+      categories: parse(dataset.menuCategories),
+      hashtags: parse(dataset.menuHashtags),
+      mergeComponents: parse(dataset.menuMergeComponents)
     },
     show: {
-      withdrawn: $("#awesome-map").data("show-withdrawn"),
-      accepted: $("#awesome-map").data("show-accepted"),
-      evaluating: $("#awesome-map").data("show-evaluating"),
-      notAnswered: $("#awesome-map").data("show-not-answered"),
-      rejected: $("#awesome-map").data("show-rejected")
+      withdrawn: parse(dataset.showWithdrawn),
+      accepted: parse(dataset.showAccepted),
+      evaluating: parse(dataset.showEvaluating),
+      notAnswered: parse(dataset.showNotAnswered),
+      rejected: parse(dataset.showRejected)
     },
-    hideControls: $("#awesome-map").data("hide-controls"),
-    collapsedMenu: $("#awesome-map").data("collapsed"),
-    components: $("#awesome-map").data("components")
+    hideControls: parse(dataset.hideCcontrols),
+    collapsedMenu: parse(dataset.collapsed),
+    components: parse(dataset.components)
   };
 
   // build awesome map (if exist)
-  $("#awesome-map .google-map").on("ready.decidim", (evt, map) => {
+  // This event is still launched using JQuery in version 0.28
+  $("#awesome-map .dynamic-map").on("ready.decidim", (evt, map) => {
     // bindPopup doesn't work for some unknown cause and these handler neither so we're cancelling them
     map.off("popupopen");
     map.off("popupclose");

data/app/packs/src/decidim/decidim_awesome/editor/index.js

@@ -0,0 +1,94 @@
+/* eslint-disable require-jsdoc */
+
+import { Editor } from "@tiptap/core";
+
+import DecidimKit from "src/decidim/editor/extensions/decidim_kit";
+
+import createEditorToolbar from "src/decidim/editor/toolbar";
+import { uniqueId } from "src/decidim/editor/common/helpers";
+
+/**
+ * Creates a new rich text editor instance and takes into account Awesome configuration for it (so user can upload images if configured)
+ *
+ * @param {HTMLElement} container The element that contains the editor.
+ * @return {Editor} The rich text editor instance.
+ */
+
+export default function createEditor(container) {
+  const DecidimAwesome = window.DecidimAwesome || {};
+  console.log("Using DecidimAwesome createEditor")
+  const input = container.parentElement.querySelector("input[type=hidden]");
+  const label = container.parentElement.querySelector("label");
+  const editorContainer = container.querySelector(".editor-input");
+
+  const editorAttributes = { role: "textbox", "aria-multiline": true };
+  if (label) {
+    const labelId = uniqueId("editorlabel");
+    label.setAttribute("id", labelId);
+    editorAttributes["aria-labelledby"] = labelId;
+  }
+
+  /**
+   * Toolbar features can be one of:
+   *
+   * - basic = only basic controls without headings
+   * - content = basic + headings
+   * - full = basic + headings + image + video
+   */
+  const features = container.dataset?.toolbar || "basic";
+  const options = JSON.parse(container.dataset.options);
+  // console.log("options for this editor", options, "container", container, "editorContainer", editorContainer, "input", input, "label", label)
+  const { context, contentTypes } = options;
+
+  const decidimOptions = {};
+
+  if (context !== "participant") {
+    decidimOptions.link = { allowTargetControl: true };
+  }
+
+  if (input.hasAttribute("maxlength")) {
+    decidimOptions.characterCount = { limit: parseInt(input.getAttribute("maxlength"), 10) };
+  }
+
+  if (features === "basic") {
+    decidimOptions.heading = false;
+  }
+
+  if (features === "full" || DecidimAwesome.allow_videos_in_editors) {
+    decidimOptions.videoEmbed = true;
+  }
+
+  if (features === "full" || DecidimAwesome.allow_images_in_editors) {
+    const { uploadImagesPath, uploadDialogSelector } = options;
+    decidimOptions.image = {
+      uploadDialogSelector,
+      contentTypes: contentTypes.image,
+      uploadImagesPath
+    };
+  }
+
+  if (container.classList.contains("js-hashtags")) {
+    decidimOptions.hashtag = true;
+  }
+  if (container.classList.contains("js-mentions")) {
+    decidimOptions.mention = true;
+  }
+  if (container.classList.contains("js-emojis")) {
+    decidimOptions.emoji = true;
+  }
+
+  const editor = new Editor({
+    element: editorContainer,
+    editorProps: { attributes: editorAttributes },
+    content: input.value,
+    editable: !input.disabled,
+    extensions: [DecidimKit.configure(decidimOptions)]
+  });
+
+  const toolbar = createEditorToolbar(editor);
+  container.insertBefore(toolbar, editorContainer);
+
+  editor.on("update", () => (input.value = editor.getHTML()));
+
+  return editor;
+}

data/app/packs/src/decidim/decidim_awesome/forms/autosave.js

@@ -1,6 +1,6 @@
-import FormStorage from "form-storage"
+import FormStorage from "form-storage";
 
-$(() => {
+document.addEventListener("DOMContentLoaded", () => {
   window.DecidimAwesome = window.DecidimAwesome || {};
   if (!window.DecidimAwesome.auto_save_forms) {
     return;
@@ -14,9 +14,9 @@ $(() => {
 
   const storeId = `awesome_autosave:${questionnaireId}`;
   const storeCheckboxesId = `awesome_autosave:checkboxes:${questionnaireId}`;
-  const $form = $("form.answer-questionnaire");
+  const form = document.querySelector("form.answer-questionnaire");
 
-  if (!$form.length) {
+  if (!form) {
     if (window.DecidimAwesome.questionnaire_answered) {
       // console.log("Questionnaire already answered, remove any data saved");
       window.localStorage.removeItem(storeId);
@@ -26,7 +26,7 @@ $(() => {
     return;
   }
 
-  const store = new FormStorage(`#${$form.attr("id")}`, {
+  const store = new FormStorage(`#${form.id}`, {
     name: storeId,
     ignores: [
       // '[type="hidden"]',
@@ -34,27 +34,33 @@ $(() => {
       '[name="authenticity_token"]',
       "[disabled]",
       // there are problems with matrix questions
-      '[type="checkbox"]' 
+      '[type="checkbox"]'
     ]
   });
 
   const showMsg = (msg, error = false, defaultTime = 700) => {
-    const time = error ? 5000 : defaultTime; // eslint-disable-line no-ternary, multiline-ternary
-    const $div = $(`<div class="awesome_autosave-notice${error ? " error" : ""}">${msg}</div>`).appendTo($form); // eslint-disable-line no-ternary, multiline-ternary
+    const time = error
+      ? 5000
+      : defaultTime;
+    const div = document.createElement("div");
+    div.className = `awesome_autosave-notice${error
+      ? " error"
+      : ""}`;
+    div.innerHTML = msg;
+    form.appendChild(div);
+    // console.log("showMsg", "form", form, "div", div, "msg", msg, "error", error, "defaultTime", defaultTime, "time", time);
     setTimeout(() => {
-      $div.fadeOut(500, () => {
-        $div.remove();
-      });
+      div.remove();
     }, time);
   };
 
   if (!window.localStorage) {
-    showMsg(window.DecidimAwesome.texts.autosaved_error, true);
+    showMsg(window.DecidimAwesome.texts.autosavedError, true);
     return;
   }
 
   if (window.localStorage.getItem(storeId)) {
-    showMsg(window.DecidimAwesome.texts.autosaved_retrieved, false, 5000);
+    showMsg(window.DecidimAwesome.texts.autosavedRetrieved, false, 5000);
   }
 
   // restore if available
@@ -62,28 +68,27 @@ $(() => {
   // restore checkboxes
   try {
     let checkboxes = JSON.parse(window.localStorage.getItem(storeCheckboxesId));
-    for (let id in checkboxes) { // eslint-disable-line guard-for-in
-      $(`#${id}`).prop("checked", checkboxes[id]);
-    }
+    Object.keys(checkboxes).forEach((id) => {
+      if (Object.prototype.hasOwnProperty.call(checkboxes, id)) {// eslint-disable-line prefer-reflect
+        document.getElementById(id).checked = checkboxes[id];
+      }
+    });
   } catch (evt) {
     console.log("No checkboxes found");
   }
-  // this trigger the "change" event, it seems that it is too much
-  // $form.find('input, textarea, select').change();
 
   const save = () => {
     store.save();
     // save checkbox manually
     let checkboxes = {};
-    $form.find('input[type="checkbox"]').each((index, el) => {
+    form.querySelectorAll('input[type="checkbox"]').forEach((el) => {
       checkboxes[el.id] = el.checked;
     });
     window.localStorage.setItem(storeCheckboxesId, JSON.stringify(checkboxes));
-    showMsg(window.DecidimAwesome.texts.autosaved_success);
+    showMsg(window.DecidimAwesome.texts.autosavedSuccess);
   };
 
   // save changes when modifications
-  $form.find("input, textarea, select").on("change", () => {
-    save();
-  });
+  form.addEventListener("change", save);
 });
+

data/app/packs/src/decidim/decidim_awesome/forms/custom_fields_renderer.js

@@ -2,8 +2,7 @@ import "formBuilder/dist/form-render.min.js";
 import "src/decidim/decidim_awesome/forms/rich_text_plugin"
 
 export default class CustomFieldsRenderer { // eslint-disable-line no-unused-vars
-  constructor(containerSelector) {
-    this.containerSelector = containerSelector || ".proposal_custom_field:last";
+  constructor() {
     this.lang = this.getLang(window.DecidimAwesome.currentLocale);
   }
 
@@ -113,6 +112,7 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
         $dl.append($dd);
       }
     }
+    // console.log("dataToXML", $dl[0].outerHTML);
     return `<xml>${$dl[0].outerHTML}</xml>`;
   }
 
@@ -122,9 +122,9 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
     }
 
     /**
-     * Hack to fix required checkboxes being reset
-     * Issue: https://github.com/decidim-ice/decidim-module-decidim_awesome/issues/82
-     */
+    * Hack to fix required checkboxes being reset
+    * Issue: https://github.com/decidim-ice/decidim-module-decidim_awesome/issues/82
+    */
     this.$element.find(".formbuilder-checkbox-group").each((_key, group) => {
       const inputs = $(".formbuilder-checkbox input", group);
       const $label = $(group).find("label");
@@ -164,9 +164,9 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
     });
 
     /**
-     * Hack to fix required radio buttons "other" value
-     * Issue: https://github.com/decidim-ice/decidim-module-decidim_awesome/issues/133
-     */
+    * Hack to fix required radio buttons "other" value
+    * Issue: https://github.com/decidim-ice/decidim-module-decidim_awesome/issues/133
+    */
     this.$element.find(".formbuilder-radio input.other-val").on("input", (input) => {
       const $input = $(input.currentTarget);
       const $group = $input.closest(".formbuilder-radio-group");
@@ -189,7 +189,6 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
     const $body = $form.find(`input[name="${this.$element.data("name")}"]`);
     if ($body.length && this.instance) {
       this.spec = this.instance.userData;
-      console.log("Spec data:", this.spec);
       $body.val(this.dataToXML(this.spec));
       this.$element.data("spec", this.spec);
     }
@@ -198,18 +197,14 @@ export default class CustomFieldsRenderer { // eslint-disable-line no-unused-var
   }
 
   init($element) {
-    console.log("CustomFieldsRenderer init");
     this.$element = $element;
-    console.log("Element for rendering:", $element);
-
     this.spec = $element.data("spec");
-    console.log("Spec data:", this.spec);
     // console.log("init", $element, "this", this)
     // in case of multilang tabs we only render one form due a limitation in the library for handling several instances
     this.instance = $element.formRender({
       i18n: {
         locale: this.lang,
-        location: "https://cdn.jsdelivr.net/npm/formbuilder-languages@1.1.0/"
+        location: window.DecidimAwesome.formBuilderLangsLocation
       },
       formData: this.spec,
       render: true,

data/app/packs/src/decidim/decidim_awesome/forms/rich_text_plugin.js

@@ -4,7 +4,8 @@
  *
  * Registers Decidim Richtext as a subtype for the textarea control
  */
-import {createQuillEditor} from "src/decidim/decidim_awesome/editors/editor"
+
+import createEditor from "src/decidim/decidim_awesome/editor";
 
 // configure the class for runtime loading
 if (!window.fbControls) {
@@ -40,7 +41,7 @@ window.fbControls.push(function(controlClass, allControlClasses) {
      * @return {void}
      */
     configure() {
-      window.fbEditors.richtext = {};
+      window.fbEditors.tiptap = {};
     }
 
     /**
@@ -60,19 +61,24 @@ window.fbControls.push(function(controlClass, allControlClasses) {
         value: (userData && userData[0]) || value || ""
       });
 
-      const css = this.markup(
-        "style",
-        `
-        #${attrs.id} { height: auto; min-height: 6rem; padding-left: 0; padding-right: 0; }
-        #${attrs.id} div.ql-container { height: ${attrs.rows || 1}rem; }
-        #${attrs.id} p.help-text { margin-top: .5rem; }
-        `,
-        { type: "text/css" }
-      );
-      const wrapperAttrs = {...attrs, "data-toolbar": "full" };
-      // console.log("build value", value, "userData", userData, "attrs", attrs, attrs.id, "wrapperAttrs", wrapperAttrs);
-      this.wrapper = this.markup("div", null, wrapperAttrs);
-      return this.markup("div", [css, this.input, this.wrapper], attrs);
+      this.editorInput = this.markup("div", null, {
+        style: "height: 25rem",
+        class: "editor-input"
+      });
+
+      const options = this.classConfig && this.classConfig.editorOptions || {"contentTypes": {image: ["image/jpeg", "image/png"]}};
+      const wrapperAttrs = {
+        "id": attrs.id, 
+        "name": attrs.name, 
+        "type": attrs.type, 
+        "className": "editor-container", 
+        "data-toolbar": "basic", 
+        "data-disabled": "false", 
+        "data-options": JSON.stringify(options)
+      };
+      // console.log("build value", value, "userData", userData, "attrs", attrs, attrs.id, "wrapperAttrs", wrapperAttrs,"this",this);
+      this.wrapper = this.markup("div", this.editorInput, wrapperAttrs);
+      return this.markup("div", [this.input, this.wrapper], {style: "margin-top: 1rem"});
     }
 
     /**
@@ -81,26 +87,15 @@ window.fbControls.push(function(controlClass, allControlClasses) {
      * @return {Object} evt - event
      */
     onRender(evt) {
-      // const value = this.config.value || '';
-      if (window.fbEditors.richtext[this.id]) {
-        // console.log("todo destroy", window.fbEditors.richtext[this.id]);
-        // window.fbEditors.richtext[this.id].richtext('destroy')
+      if (window.fbEditors.tiptap[this.id]) {
+        console.log("destroying editor", window.fbEditors.tiptap[this.id]);
+        window.fbEditors.tiptap[this.id].instance.destroy();
       }
 
-      window.fbEditors.quill[this.id] = {};
-      const editor = window.fbEditors.quill[this.id];
-      // createQuillEditor does all the job to update the hidden input wrapper
-      editor.instance = createQuillEditor(this.wrapper);
-      // editor.data = new Delta();
-      // if (value) {
-      //   editor.instance.setContents(window.JSON.parse(this.parsedHtml(value)));
-      // }
-      // editor.instance.on('text-change', function(delta) {
-      //   console.log("text-change", "delta", delta, "editor", editor);
-      // //   // editor.data = editor.data.compose(delta);
-      // });
+      window.fbEditors.tiptap[this.id] = {};
+      const editor = window.fbEditors.tiptap[this.id];
+      editor.instance = createEditor(this.wrapper);
 
-      // console.log("render! editor", editor, "this", this, "value", value);
       return evt;
     }
   }

data/app/packs/src/decidim/decidim_awesome/proposals/images.js

@@ -1,24 +1,30 @@
-$(() => {
+import { attach } from "inline-attacher";
+
+document.addEventListener("DOMContentLoaded", () => {
   window.DecidimAwesome = window.DecidimAwesome || {};
 
-  const token = $('meta[name="csrf-token"]').attr("content");
-  const $textarea = $("textarea#proposal_body");
-  const text = window.DecidimAwesome.texts.drag_and_drop_image;
+  const token = document.querySelector('meta[name="csrf-token"]') && document.querySelector('meta[name="csrf-token"]').getAttribute("content");
+  const textarea = document.querySelector("textarea#proposal_body");
 
-  if (!$textarea.length) {
+  if (!textarea) {
     return;
   }
 
   if (window.DecidimAwesome.allow_images_in_proposals) {
     // Add the capability to upload images only (they will be presented as links)
 
-    $textarea.after(`<p class="help-text">${text}</p>`);
-    $textarea.inlineattachment({
-      uploadUrl: window.DecidimAwesome.editor_uploader_path,
+    const span = document.createElement("span");
+    span.className = "input-character-counter__text";
+    span.innerHTML = window.DecidimAwesome.texts.dragAndDropImage;
+    textarea.parentNode.appendChild(span);
+    attach(textarea, {
+      uploadUrl: window.DecidimAwesome.editorUploaderPath,
       uploadFieldName: "image",
-      jsonFieldName: "url",
+      responseUrlKey: "url",
       progressText: "[Uploading file...]",
-      urlText: "{filename}",
+      urlText: (url, response) =>  {
+        return response.url;
+      },
       extraHeaders: { "X-CSRF-Token": token }
     });
   }