alchemy_cms 7.0.8 → 7.1.0.pre.b2

data/app/views/alchemy/admin/styleguide/index.html.erb

@@ -53,6 +53,28 @@
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 <% end %>
 
+<h2>Dialog Links</h2>
+
+<div class="panel">
+  <sl-tooltip content="Open in Dialog">
+    <a
+      href="/admin/styleguide"
+      is="alchemy-dialog-link"
+      class="icon_button"
+      data-dialog-options="{&quot;size&quot;:&quot;800x600&quot;,&quot;title&quot;:&quot;Styleguide in Dialog&quot;}"
+    >
+      <i class="icon ri-window-line"></i>
+    </a>
+  </sl-tooltip>
+  <a
+    href="#"
+    is="alchemy-dialog-link"
+    class="icon_button disabled"
+  >
+    <i class="icon ri-window-line"></i>
+  </a>
+</div>
+
 <h2>Forms</h2>
 
 <div class="panel">
@@ -63,7 +85,7 @@
   <form class="simple_form alchemy" action="#" accept-charset="UTF-8" method="post">
     <div class="input select">
       <label class="select control-label" for="select">Select</label>
-      <select class="select alchemy_selectbox" id="select">
+      <select class="select" id="select" is="alchemy-select">
         <option value="">Please choose</option>
         <option value="1">Option 1</option>
         <option selected="selected" value="2">Option 2</option>
@@ -73,7 +95,9 @@
 
     <div class="input">
       <label class="control-label" for="datetime_picker">Date Time Picker</label>
-      <input type="text" data-datepicker-type="datetime" id="datetime_picker">
+      <alchemy-datepicker input-type="datetime">
+        <input type="text" id="datetime_picker">
+      </alchemy-datepicker>
     </div>
 
     <div class="input">
@@ -81,10 +105,14 @@
       <div class="control_group">
         <div class="input-row">
           <div class="input-column">
-            <input type="text" data-datepicker-type="date" id="date_picker">
+            <alchemy-datepicker input-type="date">
+              <input type="text" id="date_picker">
+            </alchemy-datepicker>
           </div>
           <div class="input-column">
-            <input type="text" data-datepicker-type="time" id="time_picker">
+            <alchemy-datepicker input-type="time">
+              <input type="text" id="time_picker">
+            </alchemy-datepicker>
           </div>
         </div>
       </div>
@@ -105,10 +133,12 @@
       <input type="text" id="string_with_error">
       <small class="error">Error message</small>
     </div>
-    <div class="input">
-      <label class="control-label" for="string_with_counter">String with char counter</label>
-      <input data-alchemy-char-counter="60" type="text" id="string_with_counter">
-    </div>
+    <alchemy-char-counter max-chars="60">
+      <div class="input">
+        <label class="control-label" for="string_with_counter">String with char counter</label>
+        <input type="text" id="string_with_counter">
+      </div>
+    </alchemy-char-counter>
 
     <div class="input check_boxes">
       <label class="control-label">Check Boxes</label>
@@ -123,12 +153,12 @@
         </label>
       </div>
     </div>
-
-    <div class="input text">
-      <label class="text control-label" for="textarea_with_counter">Textarea with char counter</label>
-      <textarea data-alchemy-char-counter="160" class="text" id="textarea_with_counter"></textarea>
-    </div>
-
+    <alchemy-char-counter max-chars="160">
+      <div class="input text">
+        <label class="text control-label" for="textarea_with_counter">Textarea with char counter</label>
+        <textarea class="text" id="textarea_with_counter"></textarea>
+      </div>
+    </alchemy-char-counter>
     <div class="input text">
       <label class="text control-label" for="textarea">Textarea</label>
       <textarea class="text" id="textarea"></textarea>
@@ -137,12 +167,14 @@
 
     <div class="input text tinymce_container">
       <label class="text control-label" for="tinymce_1">Richtext editor</label>
-      <textarea class="text" id="tinymce_1"></textarea>
+      <alchemy-tinymce>
+        <textarea class="text" id="tinymce_1"></textarea>
+      </alchemy-tinymce>
     </div>
 
     <div class="submit">
       <button class="secondary">Secondary</button>
-      <button data-alchemy-button>Primary Submit</button>
+      <button type="submit" is="alchemy-button">Primary Submit</button>
     </div>
   </form>
 </div>
@@ -181,33 +213,33 @@
   </tr>
   <tr class="even">
     <td class="icon">
-      <i class="icon fa-fw fas fa-user"></i>
+      <i class="icon ri-fw ri-user-line"></i>
     </td>
     <td>Even table cell 1</td>
     <td>Even table cell 2</td>
     <td>Even table cell 3</td>
     <td class="tools">
       <a href="#" class="icon_button">
-        <i class="icon fa-fw fas fa-minus"></i>
+        <i class="icon ri-fw ri-delete-bin-2-line"></i>
       </a>
       <a href="#" class="icon_button">
-        <i class="icon fa-fw fas fa-edit"></i>
+        <i class="icon ri-fw ri-edit-line"></i>
       </a>
     </td>
   </tr>
   <tr class="odd">
     <td class="icon">
-      <i class="icon fa-fw fas fa-user"></i>
+      <i class="icon ri-fw ri-user-line"></i>
     </td>
     <td>Odd table cell 1</td>
     <td>Odd table cell 2</td>
     <td>Odd table cell 3</td>
     <td class="tools">
       <a href="#" class="icon_button">
-        <i class="icon fa-fw fas fa-minus"></i>
+        <i class="icon ri-fw ri-delete-bin-2-line"></i>
       </a>
       <a href="#" class="icon_button">
-        <i class="icon fa-fw fas fa-edit"></i>
+        <i class="icon ri-fw ri-edit-line"></i>
       </a>
     </td>
   </tr>
@@ -230,9 +262,3 @@
   <li>List item</li>
   <li>List item</li>
 </ol>
-
-<%= content_for :javascripts do %>
-  <script>
-    Alchemy.Tinymce.init([1])
-  </script>
-<% end %>

data/app/views/alchemy/admin/tags/_tag.html.erb

@@ -1,26 +1,28 @@
 <tr class="<%= cycle('even', 'odd') %>">
-  <td class="icon"><%= render_icon :tag %></td>
+  <td class="icon"><%= render_icon(:tag, size: "xl") %></td>
   <td class="name"><%= tag.name %></td>
-  <td class="count">
+  <td>
     <%= tag.taggings.collect(&:taggable).collect { |t| t.class.model_name.human }.uniq.join(', ') %>
   </td>
   <td class="count"><%= tag.taggings.count %></td>
   <td class="tools">
   <% if can?(:destroy, Alchemy::Tag) %>
-    <%= delete_button admin_tag_path(tag), {
-      message: Alchemy.t(:do_you_really_want_to_delete_this_tag?),
-      icon: :minus,
-      title: Alchemy.t(:delete_tag)
-    } %>
+    <sl-tooltip content="<%= Alchemy.t(:delete_tag) %>">
+      <%= delete_button admin_tag_path(tag), {
+        message: Alchemy.t(:do_you_really_want_to_delete_this_tag?),
+        icon: :minus
+      } %>
+    </sl-tooltip>
   <% end %>
   <% if can?(:edit, Alchemy::Tag) %>
-    <%= link_to_dialog render_icon(:edit),
-      edit_admin_tag_path(tag),
-      {
-        title: Alchemy.t(:edit_tag),
-        size: '360x410'
-      },
-      title: Alchemy.t(:edit_tag) %>
+    <sl-tooltip content="<%= Alchemy.t(:edit_tag) %>" placement="top-end">
+      <%= link_to_dialog render_icon(:edit),
+        edit_admin_tag_path(tag),
+        {
+          title: Alchemy.t(:edit_tag),
+          size: '360x410'
+        } %>
+    </sl-tooltip>
   <% end %>
   </td>
 </tr>

data/app/views/alchemy/admin/tags/index.html.erb

@@ -1,16 +1,19 @@
 <% content_for :toolbar do %>
-  <%= toolbar_button(
-    icon: :plus,
-    label: Alchemy.t('New Tag'),
-    url: alchemy.new_admin_tag_path,
-    title: Alchemy.t('New Tag'),
-    hotkey: 'alt+n',
-    dialog_options: {
+  <div class="toolbar_buttons">
+    <%= toolbar_button(
+      icon: :plus,
+      label: Alchemy.t('New Tag'),
+      url: alchemy.new_admin_tag_path,
       title: Alchemy.t('New Tag'),
-      size: '310x180'
-    },
-    if_permitted_to: [:create, Alchemy::Tag]
-  ) %>
+      hotkey: 'alt+n',
+      tooltip_placement: "top-start",
+      dialog_options: {
+        title: Alchemy.t('New Tag'),
+        size: '310x180'
+      },
+      if_permitted_to: [:create, Alchemy::Tag]
+    ) %>
+  </div>
   <%= render 'alchemy/admin/partials/search_form' %>
 <% end %>
 
@@ -23,7 +26,7 @@
       <tr>
         <th class="icon"></th>
         <th class="name"><%= sort_link(@query, :name) %></th>
-        <th class="count"><%= Gutentag::Tag.human_attribute_name(:taggings_types) %></th>
+        <th style="width: 15%"><%= Gutentag::Tag.human_attribute_name(:taggings_types) %></th>
         <th class="count"><%= sort_link(@query, :taggings_count) %></th>
         <th class="tools"></th>
       </tr>

data/app/views/alchemy/admin/tinymce/_setup.html.erb

@@ -0,0 +1,28 @@
+<% asset_host = ActionController::Base.config.asset_host %>
+
+<link rel="preload" href="<%= asset_host %><%= assets_prefix %>/tinymce/skins/ui/alchemy/skin.min.css" as="style" />
+<% if Alchemy::Tinymce.init[:content_css] %>
+  <link rel="preload" href="<%= asset_host %><%= Alchemy::Tinymce.init[:content_css] %>" as="style" />
+<% end %>
+<% Alchemy::Tinymce.preloadable_plugins.each do |plugin| %>
+  <link rel="preload" href="<%= asset_host %><%= assets_prefix %>/tinymce/plugins/<%= plugin %>/plugin.min.js" as="script">
+<% end %>
+
+<script>
+  // Setting TinyMCE path.
+  var tinyMCEPreInit = {
+    <% if ActionController::Base.config.asset_host_set? %>
+    base: '<%= asset_url(assets_prefix + '/tinymce') %>',
+    <% else %>
+    base: '<%= asset_path(assets_prefix + '/tinymce') %>',
+    <% end %>
+    suffix: '.min'
+  };
+  // Holds the default Alchemy TinyMCE configuration
+  Alchemy.TinymceDefaults = {
+    plugins: '<%= Alchemy::Tinymce.plugins.join(',') %>',
+    <% Alchemy::Tinymce.init.each do |k, v| %>
+    <%= k %>: <%== v.to_json %>,
+    <% end %>
+  };
+</script>

data/app/views/alchemy/admin/uploader/_button.html.erb

@@ -1,36 +1,30 @@
-<%= form_for [:admin, object], html: {multipart: true, class: 'upload-button'} do |f| %>
-  <%= f.file_field file_attribute,
-    class: 'fileupload fileupload--field', multiple: true,
-    name: "#{f.object_name}[#{file_attribute}]", tabindex: '-1' %>
-  <%= hidden_field_tag("#{f.object_name}[upload_hash]", Time.current.hash) if object.respond_to?(:upload_hash) %>
-  <%= f.label file_attribute, data: {alchemy_hotkey: 'alt+n'} do %>
-    <div class="button_with_label">
-      <span class="icon_button" tabindex="0"><%= render_icon :upload %></span>
-      <label>
-        <%= local_assigns[:label] ||
-          Alchemy.t(:button_label, scope: [:uploader, object.class.model_name.i18n_key]) %>
-      </label>
-    </div>
-  <% end %>
-<% end %>
+<% file_types = configuration(:uploader)['allowed_filetypes'][object.class.model_name.collection] || ['*'] %>
+<% accept = file_types == ["*"] ? false : file_types.map {|type| ".#{type}"}.join(", ") %>
 
-<% file_types = local_assigns[:file_types].presence ||
-  configuration(:uploader)['allowed_filetypes'][object.class.model_name.collection] || ['*'] %>
+<alchemy-uploader dropzone="<%= local_assigns[:dropzone] || "#main_content" %>">
+  <%= form_for [:admin, object], html: { multipart: true, class: 'upload-button' } do |f| %>
+    <%= f.file_field file_attribute,
+      class: 'fileupload fileupload--field', multiple: true, accept: accept,
+      name: "#{f.object_name}[#{file_attribute}]", tabindex: '-1' %>
+    <%= hidden_field_tag("#{f.object_name}[upload_hash]", Time.current.hash) if object.respond_to?(:upload_hash) %>
+    <%= f.label file_attribute, data: { alchemy_hotkey: 'alt+n' } do %>
+      <%= content_tag "sl-tooltip", content: local_assigns[:label] ||
+                Alchemy.t(:button_label, scope: [:uploader, object.class.model_name.i18n_key]), placement: "top-start" do %>
+        <span class="icon_button" tabindex="0"><%= render_icon "upload-2" %></span>
+      <% end %>
+    <% end %>
+  <% end %>
+</alchemy-uploader>
 
 <script type='text/javascript'>
-  $(function() {
-    var options = {
-      file_types: '<%= file_types.join("|") %>',
-      dropzone: '<%= local_assigns[:dropzone] || '#main_content' %>',
-      complete: function() {
-        var url = '<%= redirect_url.html_safe %>';
+  document.querySelector("alchemy-uploader").addEventListener("Alchemy.upload.successful", () => {
+    setTimeout(() => {
+      var url = '<%= redirect_url.html_safe %>';
       <% if local_assigns[:in_dialog] %>
-        $.get(url, null, null, 'script');
+      $.get(url, null, null, 'script');
       <% else %>
-        Turbo.visit(url);
+      Turbo.visit(url);
       <% end %>
-      }
-    };
-    Alchemy.Uploader(options);
-  });
+    }, 1000)
+  })
 </script>

data/app/views/alchemy/admin/uploader/_setup.html.erb

@@ -1,13 +1,8 @@
-<div class="overall-upload">
-  <div class="progress">
-    <span class="progress-status">0%</span>
-    (<span class="uploaded-files-count">0</span>/<span class="total-files-count">0</span>)
-  </div>
-  <div class="upload-progress-container"></div>
-</div>
 <script>
   Alchemy.uploader_defaults = {
     file_size_limit: <%= configuration(:uploader)['file_size_limit'] || 100 -%>,
-    file_upload_limit: <%= configuration(:uploader)['upload_limit'] || 50 -%>
+    upload_limit: <%= configuration(:uploader)['upload_limit'] || 50 -%>,
+    allowed_filetype_pictures: "<%= configuration(:uploader)['allowed_filetypes']['alchemy/pictures']&.join(", ") || '*' -%>", 
+    allowed_filetype_attachments: "<%= configuration(:uploader)['allowed_filetypes']['alchemy/attachments']&.join(", ") || '*' -%>", 
   }
 </script>

data/app/views/alchemy/base/500.html.erb

@@ -30,7 +30,7 @@
 
 <script>
   $(function(){
-    $('.error_details--toggle').click(function(){
+    $('.error_details--toggle').on("click", function(){
       $('.error.message p').toggleClass('hidden');
       return false;
     });

data/app/views/alchemy/base/error_notice.js.erb

@@ -1,2 +1 @@
 Alchemy.growl('<%= j @notice %>', 'error');
-Alchemy.Buttons.enable();

data/app/views/alchemy/ingredients/_boolean_editor.html.erb

@@ -5,7 +5,7 @@
     <%= f.label :value, style: "display: inline-block", for: nil do %>
       <%= f.check_box :value, id: nil %>
       <%= render_ingredient_role(boolean_editor) %>
+      <%= render_hint_for(boolean_editor, size: "lg", fixed_width: false) %>
     <% end %>
-    <%= render_hint_for(boolean_editor) %>
   <% end %>
 <% end %>

data/app/views/alchemy/ingredients/_datetime_editor.html.erb

@@ -12,6 +12,6 @@
     ) %>
   <% end %>
   <label for="<%= datetime_editor.form_field_id %>" class="ingredient-date--label">
-    <i class="icon far fa-calendar-alt fa-fw fa-lg"></i>
+    <i class="icon ri-calendar-line ri-fw"></i>
   </label>
 <% end %>

data/app/views/alchemy/ingredients/_file_editor.html.erb

@@ -1,4 +1,4 @@
-<% dialog_link = link_to_dialog render_icon(:file, style: "regular"),
+<% dialog_link = link_to_dialog render_icon("file-add"),
   alchemy.admin_attachments_path(
     form_field_id: file_editor.form_field_id(:attachment_id),
     only: file_editor.settings[:only],
@@ -18,11 +18,11 @@
   <%= element_form.fields_for(:ingredients, file_editor.ingredient) do |f| %>
     <%= ingredient_label(file_editor) %>
     <div class="file">
-      <% if file_editor.attachment %>
-        <div class="file_icon">
+      <div class="file_icon">
+        <% if file_editor.attachment %>
           <%= render_icon(file_editor.attachment.icon_css_class) %>
-        </div>
-      <% end %>
+        <% end %>
+      </div>
       <div class="file_name">
         <%= file_editor.attachment&.name %>
       </div>

data/app/views/alchemy/ingredients/_link_editor.html.erb

@@ -14,7 +14,7 @@
     <%= f.hidden_field :link_class_name, "data-link-class": true, id: nil %>
     <%= f.hidden_field :link_target, "data-link-target": true, id: nil %>
   <% end %>
-  <%= render "alchemy/ingredients/shared/link_tools", ingredient_editor: link_editor %>
+  <%= render "alchemy/ingredients/shared/link_tools", ingredient_editor: link_editor, wrapper_class: "ingredient_link_buttons" %>
 <% end %>
 
 <script>

data/app/views/alchemy/ingredients/_node_editor.html.erb

@@ -3,24 +3,11 @@
   data: node_editor.data_attributes do %>
   <%= element_form.fields_for(:ingredients, node_editor.ingredient) do |f| %>
     <%= ingredient_label(node_editor, :node_id) %>
-    <%= f.text_field :node_id,
-      value: node_editor.node&.id,
-      id: node_editor.form_field_id(:node_id),
-      class: 'alchemy_selectbox full_width' %>
+    <%= render Alchemy::Admin::NodeSelect.new(node_editor.node, url: alchemy.api_nodes_path(language_id: node_editor.page&.language_id, include: :ancestors), query_params: node_editor.settings.fetch(:query_params, {})) do %>
+      <%= f.text_field :node_id,
+        value: node_editor.node&.id,
+        id: node_editor.form_field_id(:node_id),
+        class: 'alchemy_selectbox full_width' %>
+    <% end %>
   <% end %>
 <% end %>
-
-<script>
-  <% query_params = node_editor.settings.fetch(:query_params, {}).merge({
-    include: :ancestors
-  }) %>
-  $('#<%= node_editor.form_field_id(:node_id) %>').alchemyNodeSelect({
-    placeholder: "<%= Alchemy.t(:search_node) %>",
-    url: "<%= alchemy.api_nodes_path(language_id: node_editor.page&.language_id) %>",
-    query_params: <%== query_params.to_json %>,
-    <% if node_editor.node %>
-    <% serialized_node = ActiveModelSerializers::SerializableResource.new(node_editor.node, include: :ancestors) %>
-    initialSelection: <%== serialized_node.to_json %>
-    <% end %>
-  })
-</script>

data/app/views/alchemy/ingredients/_page_editor.html.erb

@@ -3,23 +3,11 @@
   data: page_editor.data_attributes do %>
   <%= element_form.fields_for(:ingredients, page_editor.ingredient) do |f| %>
     <%= ingredient_label(page_editor, :page_id) %>
-    <%= f.text_field :page_id,
-      value: page_editor.page&.id,
-      id: page_editor.form_field_id(:page_id),
-      class: 'alchemy_selectbox full_width' %>
-  <% end %>
-<% end %>
-
-<script>
-  $('#<%= page_editor.form_field_id(:page_id) %>').alchemyPageSelect({
-    placeholder: "<%= Alchemy.t(:search_page) %>",
-    url: "<%= alchemy.api_pages_path %>",
-    query_params: <%== page_editor.settings[:query_params].to_json %>,
-    <% if page_editor.page %>
-    initialSelection: {
-      id: <%= page_editor.page.id %>,
-      text: "<%= page_editor.page.name %>"
-    }
+    <%= render Alchemy::Admin::PageSelect.new(page_editor.page, allow_clear: true, query_params: page_editor.settings[:query_params]) do %>
+      <%= f.text_field :page_id,
+        value: page_editor.page&.id,
+        id: page_editor.form_field_id(:page_id),
+        class: 'full_width' %>
+      <% end %>
     <% end %>
-  })
-</script>
+<% end %>

data/app/views/alchemy/ingredients/_picture_editor.html.erb

@@ -15,7 +15,7 @@
       },
       class: "picture_thumbnail" do %>
       <a class="picture_tool delete">
-        <%= render_icon(:times) %>
+        <%= render_icon("close") %>
       </a>
       <div class="picture_image">
         <div class="thumbnail_background">
@@ -27,7 +27,7 @@
               title: Alchemy.t(:image_name, name: picture_editor.picture.name),
             ) %>
           <% else %>
-            <%= render_icon(:image, style: "regular") %>
+            <%= render_icon(:image) %>
           <% end %>
         </div>
       </div>

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

@@ -2,20 +2,11 @@
   class: richtext_editor.css_classes,
   data: richtext_editor.data_attributes do %>
   <%= element_form.fields_for(:ingredients, richtext_editor.ingredient) do |f| %>
-    <%= ingredient_label(richtext_editor) %>
-    <div class="tinymce_container">
-      <%= f.text_area :value,
-        class: "has_tinymce",
-        id: richtext_editor.element_id %>
-    </div>
-  <% end %>
-  <% if richtext_editor.has_custom_tinymce_config? %>
-    <script type="text/javascript" charset="utf-8">
-      Alchemy.Tinymce.setCustomConfig("<%= richtext_editor.element_id %>", {
-        <% richtext_editor.custom_tinymce_config.each do |k, v| %>
-        <%= k %>: <%== v.to_json %>,
-        <% end %>
-      });
-    </script>
+    <%= ingredient_label(richtext_editor, :value) %>
+
+    <%- custom_tinymce_config = richtext_editor.custom_tinymce_config.inject({}) { |obj, (k, v)| obj[k.to_s.dasherize] = v.to_json; obj} %>
+    <%= content_tag("alchemy-tinymce", custom_tinymce_config) do %>
+      <%= f.text_area :value, id: richtext_editor.form_field_id(:value) %>
+    <% end %>
   <% end %>
 <% end %>

data/app/views/alchemy/ingredients/_select_editor.html.erb

@@ -23,7 +23,8 @@
       end %>
       <%= f.select :value, options_tags, {}, {
         id: select_editor.form_field_id,
-        class: ["alchemy_selectbox", "ingredient-editor-select"]
+        class: ["ingredient-editor-select"],
+        is: "alchemy-select"
       } %>
     <% end %>
   <% end %>

data/app/views/alchemy/ingredients/_text_editor.html.erb

@@ -17,7 +17,7 @@
       <%= f.hidden_field :link_title, "data-link-title": true, id: nil %>
       <%= f.hidden_field :link_class_name, "data-link-class": true, id: nil %>
       <%= f.hidden_field :link_target, "data-link-target": true, id: nil %>
-      <%= render "alchemy/ingredients/shared/link_tools", ingredient_editor: text_editor %>
+      <%= render "alchemy/ingredients/shared/link_tools", ingredient_editor: text_editor, wrapper_class: "ingredient_link_buttons" %>
     <% end %>
   <% end %>
 <% end %>

data/app/views/alchemy/ingredients/shared/_anchor.html.erb

@@ -1,5 +1,5 @@
 <span class="edit-ingredient-anchor-link">
-  <%= link_to_dialog render_icon(:bookmark, { style: ingredient_editor.dom_id.present? ? "solid" : "regular" }),
+  <%= link_to_dialog render_icon(:bookmark, { style: ingredient_editor.dom_id.present? ? "fill" : "line" }),
     alchemy.edit_admin_ingredient_path(id: ingredient_editor.id),
     {
       title: Alchemy.t(:edit_anchor),

data/app/views/alchemy/ingredients/shared/_link_tools.html.erb

@@ -1,20 +1,10 @@
-<span class="ingredient_link_buttons">
-  <%= link_to(
-    render_icon(:link),
-    '#',
-    onclick: 'new Alchemy.LinkDialog(this).open(); return false;',
-    class: "icon_button#{ingredient_editor.linked? ? ' linked' : ''} link-ingredient",
-    "data-parent-selector": "[data-ingredient-id='#{ingredient_editor.id}']",
-    title: Alchemy.t(:place_link),
-    id: "edit_link_#{ingredient_editor.id}"
-  ) %>
-  <%= link_to(
-    render_icon(:unlink),
-    '#',
-    onclick: "return Alchemy.LinkDialog.removeLink(this, '[data-ingredient-id=\"#{ingredient_editor.id}\"]')",
-    class: "icon_button unlink-ingredient #{ingredient_editor.linked? ? 'linked' : 'disabled'}",
-    tabindex: ingredient_editor.linked? ? nil : '-1',
-    'data-ingredient-id' => ingredient_editor.id,
-    title: Alchemy.t(:unlink)
-  ) %>
-</span>
+<%= content_tag "alchemy-link-buttons", class: local_assigns[:wrapper_class], data: {ingredient_id: ingredient_editor.id} do %>
+  <%= content_tag "sl-tooltip", content: Alchemy.t(:place_link) do %>
+    <%= content_tag "button", "", is: "alchemy-link-button",
+      class: [ingredient_editor.linked? ? "linked" : nil] %>
+  <% end %>
+  <%= content_tag "sl-tooltip", content: Alchemy.t(:unlink) do %>
+    <%= content_tag "button", "", is: "alchemy-unlink-button",
+      class: [ingredient_editor.linked? ? "linked" : "disabled"] %>
+  <% end %>
+<% end %>