Update ingredient icon on element update

app/views/alchemy/admin/elements/update.js.erb

@@ -7,6 +7,9 @@
 
   $errors.hide();
   $el.trigger('SaveElement.Alchemy', {previewText: '<%= j sanitize(@element.preview_text) %>'});
+  <% @element.ingredients.select { |i| i.settings[:anchor] }.each do |ingredient| %>
+    Alchemy.IngredientAnchorLink.updateIcon(<%= ingredient.id %>, <%= ingredient.dom_id.present? %>);
+  <% end %>
   Alchemy.growl('<%= Alchemy.t(:element_saved) %>');
   Alchemy.PreviewWindow.refresh(function() {
     Alchemy.ElementEditors.focusElementPreview(<%= @element.id %>);

app/views/alchemy/admin/ingredients/update.js.erb

@@ -1,8 +1,7 @@
 Alchemy.closeCurrentDialog(
 <% if @ingredient.settings[:anchor] %>
   function() {
-    const ingredientEditor = document.querySelector('[data-ingredient-id="<%= @ingredient.id %>"]');
-    ingredientEditor.querySelector('.edit-ingredient-anchor-link a').innerHTML = '<%= j render_icon(:bookmark, { style: @ingredient.dom_id.present? ? "solid" : "regular" }) %>';
+    Alchemy.IngredientAnchorLink.updateIcon(<%= @ingredient.id %>, <%= @ingredient.dom_id.present? %>);
   }
 <% end %>
 );

package/admin.js

@@ -2,6 +2,7 @@ import translate from "./src/i18n"
 import translationData from "./src/translations"
 import NodeTree from "./src/node_tree"
 import fileEditors from "./src/file_editors"
+import IngredientAnchorLink from "./src/ingredient_anchor_link"
 import pictureEditors from "./src/picture_editors"
 import ImageLoader from "./src/image_loader"
 import ImageCropper from "./src/image_cropper"
@@ -24,6 +25,7 @@ Object.assign(Alchemy, {
   pictureEditors,
   ImageLoader: ImageLoader.init,
   ImageCropper,
+  IngredientAnchorLink,
   Datepicker,
   Sitemap,
   PagePublicationFields

package/src/ingredient_anchor_link.js

@@ -0,0 +1,17 @@
+export default class IngredientAnchorLink {
+  static updateIcon(ingredientId, active = false) {
+    const ingredientEditor = document.querySelector(
+      `[data-ingredient-id="${ingredientId}"]`
+    )
+    if (ingredientEditor) {
+      const icon = ingredientEditor.querySelector(
+        ".edit-ingredient-anchor-link > a > .icon"
+      )
+      if (icon) {
+        active
+          ? icon.classList.replace("far", "fas")
+          : icon.classList.replace("fas", "far")
+      }
+    }
+  }
+}