From 74c7a9d695f05f1a354272ceab4189876a984786 Mon Sep 17 00:00:00 2001
From: Sascha Karnatz <122262394+sascha-karnatz@users.noreply.github.com>
Date: Mon, 28 Aug 2023 22:37:33 +0200
Subject: [PATCH] Add support for attributes on alchemy-tinymce

Allow the toolbar and plugin attribute on the tinymce web component. The configuration is read in from the elements.yml and will be available as (escaped) JSON. It is also possible to use a plain string.
---
 .../alchemy_admin/components/tinymce.js       | 23 ++++++++++++++-----
 .../ingredients/_richtext_editor.html.erb     | 21 +++++++++--------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/app/javascript/alchemy_admin/components/tinymce.js b/app/javascript/alchemy_admin/components/tinymce.js
index ba0cd74461..fdf782417d 100644
--- a/app/javascript/alchemy_admin/components/tinymce.js
+++ b/app/javascript/alchemy_admin/components/tinymce.js
@@ -1,8 +1,8 @@
 class Tinymce extends HTMLElement {
   constructor() {
     super()
-    this.externalConfig = {}
 
+    // add default css classes to support the current styles
     this.className = "tinymce_container"
     this.textarea.className = "has_tinymce"
   }
@@ -93,17 +93,28 @@ class Tinymce extends HTMLElement {
   }
 
   get configuration() {
+    const externalConfig = {}
+
+    // read the attributes on the component and add them as custom configuration
+    this.getAttributeNames().forEach((attributeName) => {
+      if (attributeName !== "class") {
+        const config = this.getAttribute(attributeName)
+        try {
+          externalConfig[attributeName] = JSON.parse(config)
+        } catch (e) {
+          // also string values as parameter
+          externalConfig[attributeName] = config
+        }
+      }
+    })
+
     return {
       ...Alchemy.TinymceDefaults,
-      ...this.externalConfig,
+      ...externalConfig,
       locale: Alchemy.locale,
       selector: `#${this.textareaId}`
     }
   }
-
-  set configuration(config) {
-    this.externalConfig = config
-  }
 }
 
 customElements.define("alchemy-tinymce", Tinymce)
diff --git a/app/views/alchemy/ingredients/_richtext_editor.html.erb b/app/views/alchemy/ingredients/_richtext_editor.html.erb
index 5340afd8e1..070987de14 100644
--- a/app/views/alchemy/ingredients/_richtext_editor.html.erb
+++ b/app/views/alchemy/ingredients/_richtext_editor.html.erb
@@ -5,17 +5,18 @@
   <%= element_form.fields_for(:ingredients, richtext_editor.ingredient) do |f| %>
     <%= ingredient_label(richtext_editor, :value, for: richtext_dom_id) %>
 
-    <alchemy-tinymce>
-      <%= f.text_area :value, id: richtext_dom_id %>
-    </alchemy-tinymce>
-  <% end %>
-  <% if richtext_editor.has_custom_tinymce_config? %>
-    <script type="text/javascript" charset="utf-8">
-      document.getElementById("<%= richtext_dom_id %>").configuration = {
+    <% if richtext_editor.has_custom_tinymce_config? %>
+      <alchemy-tinymce
         <% richtext_editor.custom_tinymce_config.each do |k, v| %>
-        <%= k %>: <%== v.to_json %>,
+        <%= k %>="<%= v.to_json %>"
         <% end %>
-      };
-    </script>
+      >
+        <%= f.text_area :value, id: richtext_dom_id %>
+      </alchemy-tinymce>
+    <% else %>
+      <alchemy-tinymce>
+        <%= f.text_area :value, id: richtext_dom_id %>
+      </alchemy-tinymce>
+    <%  end %>
   <% end %>
 <% end %>