From be8bcdcd2b6f088871e50072e496994db000186f Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Wed, 16 Oct 2024 12:06:38 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20cargar=20los=20editores=20din=C3=A1micam?=
 =?UTF-8?q?ente=20#17599?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controllers/new_editor_controller.js       | 18 ++++++++++++++++++
 app/javascript/etc/index.js                    |  1 -
 app/javascript/etc/new_editor.js               | 14 --------------
 app/views/posts/attributes/_new_content.haml   |  4 ++--
 4 files changed, 20 insertions(+), 17 deletions(-)
 create mode 100644 app/javascript/controllers/new_editor_controller.js
 delete mode 100644 app/javascript/etc/new_editor.js

diff --git a/app/javascript/controllers/new_editor_controller.js b/app/javascript/controllers/new_editor_controller.js
new file mode 100644
index 00000000..82af0fa9
--- /dev/null
+++ b/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,
+        },
+      });
+  }
+}
diff --git a/app/javascript/etc/index.js b/app/javascript/etc/index.js
index 641d8085..7dd3671b 100644
--- a/app/javascript/etc/index.js
+++ b/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'
diff --git a/app/javascript/etc/new_editor.js b/app/javascript/etc/new_editor.js
deleted file mode 100644
index dbc87bbc..00000000
--- a/app/javascript/etc/new_editor.js
+++ /dev/null
@@ -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"),
-      },
-    });
-  });
-});
diff --git a/app/views/posts/attributes/_new_content.haml b/app/views/posts/attributes/_new_content.haml
index cbdf8f94..bc3d1cb1 100644
--- a/app/views/posts/attributes/_new_content.haml
+++ b/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'