Allow more complex attributes on alchemy-tinymce

You need sometimes attributes with underscores, which is uncommon in HTML. For that reason the attributes are casted and will be transform back in the web component. Also a new element with a lot of custom configuration was added to test the Tinymce behavior.

app/assets/stylesheets/alchemy/forms.scss

@@ -31,7 +31,7 @@ form {
     > textarea,
     > .select2-container,
     > .autocomplete_tag_list,
-    > .mce-tinymce,
+    > .tinymce_container,
     > .with-hint {
       width: $form-right-width;
       float: right;

app/javascript/alchemy_admin/components/tinymce.js

@@ -99,11 +99,13 @@ class Tinymce extends HTMLElement {
     this.getAttributeNames().forEach((attributeName) => {
       if (attributeName !== "class") {
         const config = this.getAttribute(attributeName)
+        const key = attributeName.replaceAll("-", "_")
+
         try {
-          externalConfig[attributeName] = JSON.parse(config)
+          externalConfig[key] = JSON.parse(config)
         } catch (e) {
           // also string values as parameter
-          externalConfig[attributeName] = config
+          externalConfig[key] = config
         }
       }
     })

app/models/alchemy/ingredients/richtext.rb

@@ -38,7 +38,7 @@ def has_custom_tinymce_config?
       end
 
       def custom_tinymce_config
-        settings[:tinymce]
+        settings[:tinymce] || []
       end
 
       private

app/views/alchemy/ingredients/_richtext_editor.html.erb

@@ -3,19 +3,12 @@
   data: richtext_editor.data_attributes do %>
   <%= element_form.fields_for(:ingredients, richtext_editor.ingredient) do |f| %>
     <%= ingredient_label(richtext_editor, :value) %>
-
-    <% if richtext_editor.has_custom_tinymce_config? %>
-      <alchemy-tinymce
-        <% richtext_editor.custom_tinymce_config.each do |k, v| %>
-        <%= k %>="<%= v.to_json %>"
-        <% end %>
-      >
-        <%= f.text_area :value %>
-      </alchemy-tinymce>
-    <% else %>
-      <alchemy-tinymce>
-        <%= f.text_area :value %>
-      </alchemy-tinymce>
-    <%  end %>
+    <alchemy-tinymce
+      <% richtext_editor.custom_tinymce_config.each do |k, v| %>
+      <%= k.to_s.dasherize %>="<%= v.to_json %>"
+      <% end %>
+    >
+      <%= f.text_area :value %>
+    </alchemy-tinymce>
   <% end %>
 <% end %>

spec/dummy/config/alchemy/elements.yml

@@ -151,6 +151,31 @@
     - role: text
       type: Richtext
 
+- name: tinymce_custom
+  ingredients:
+    - role: text
+      type: Richtext
+      as_element_title: true
+      settings:
+        tinymce:
+          toolbar: bold italic | subscript superscript | numlist bullist |
+            styleselect removeformat | undo redo | pastetext | anchor alchemy_link unlink | fullscreen code
+          end_container_on_empty_block: true
+          style_formats:
+            - title: Text styles
+              items:
+                - title: Paragraph
+                  block: p
+                - title: Lead Paragraph
+                  block: p
+                  classes: [lead]
+            - title: Wrappers
+              items:
+                - title: Centered section
+                  block: section
+                  classes: [centered]
+                  wrapper: true
+
 - name: slide
   compact: true
   ingredients:

spec/dummy/config/alchemy/page_layouts.yml

@@ -33,7 +33,8 @@
       left_column,
       old,
       article,
-      element_with_ingredient_groups
+      element_with_ingredient_groups,
+      tinymce_custom
     ]
   autogenerate: [all_you_can_eat, right_column, left_column]
 

spec/libraries/alchemy/tasks/usage_spec.rb

@@ -35,7 +35,8 @@
         {"name" => "right_column", "count" => 0},
         {"name" => "search", "count" => 0},
         {"name" => "slide", "count" => 0},
-        {"name" => "slider", "count" => 0}
+        {"name" => "slider", "count" => 0},
+        {"name" => "tinymce_custom", "count" => 0}
       ]
     end
   end

spec/models/alchemy/ingredients/richtext_spec.rb

@@ -47,7 +47,7 @@
   describe "#custom_tinymce_config" do
     subject { richtext_ingredient.custom_tinymce_config }
 
-    it { is_expected.to be_nil }
+    it { is_expected.to eq([]) }
 
     context "with custom configuration" do
       let(:richtext_settings) { {tinymce: {plugin: "link"}} }

spec/models/alchemy/site_spec.rb

@@ -308,7 +308,8 @@ module Alchemy
                   "left_column",
                   "old",
                   "article",
-                  "element_with_ingredient_groups"
+                  "element_with_ingredient_groups",
+                  "tinymce_custom"
                 ],
                 "hint" => true
               },