fix: cargar los editores dinámicamente #17599

app/javascript/controllers/new_editor_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+import SuttyEditor from "@suttyweb/editor";
+
+import "@suttyweb/editor/dist/style.css";
+
+export default class extends Controller {
+  static targets = ["textarea"];
+
+  connect() {
+    this.editor =
+      new SuttyEditor({
+        target: this.element,
+        props: {
+          textareaEl: this.textareaTarget,
+        },
+      });
+  }
+}

app/javascript/etc/index.js

@@ -4,5 +4,4 @@ import './input-tag'
 import './prosemirror'
 import './timezone'
 import './turbolinks-anchors'
-import './new_editor'
 import './htmx_abort'

app/javascript/etc/new_editor.js

@@ -1,14 +0,0 @@
-import SuttyEditor from "@suttyweb/editor";
-
-import "@suttyweb/editor/dist/style.css";
-
-document.addEventListener("turbolinks:load", () => {
-  document.querySelectorAll(".new-editor").forEach((editorContainer) => {
-    new SuttyEditor({
-      target: editorContainer,
-      props: {
-        textareaEl: editorContainer.querySelector("textarea"),
-      },
-    });
-  });
-});

app/views/posts/attributes/_new_content.haml

@@ -3,7 +3,7 @@
   = render 'posts/attribute_feedback',
     post: post, attribute: attribute, metadata: metadata
 
-  .new-editor.content{ id: attribute }
+  .new-editor.content{ id: attribute, data: { controller: 'new-editor' } }
     = text_area_tag "#{base}[#{attribute}]", metadata.to_s.html_safe,
-      dir: dir, lang: locale,
+      dir: dir, lang: locale, 'data-new-editor-target': 'textarea',
       **field_options(attribute, metadata), class: 'd-none'