alchemy_cms 7.0.16 → 7.1.0.pre.b1

data/app/assets/stylesheets/tinymce/skins/alchemy/skin.min.css.scss

@@ -44,7 +44,7 @@
 }
 
 .mce-container::-webkit-scrollbar-thumb {
-  background-color: rgba(53,57,71,0.3);
+  background-color: rgba(53, 57, 71, 0.3);
   width: 6px;
   height: 6px;
   border-radius: $default-border-radius;
@@ -84,7 +84,7 @@ div.mce-fullscreen {
 }
 
 .mce-tinymce {
-  visibility: visible!important;
+  visibility: visible !important;
   position: relative;
   display: block;
   border-radius: $default-border-radius;
@@ -98,7 +98,7 @@ div.mce-fullscreen {
 }
 
 div.mce-edit-area {
-  background: #FFF;
+  background: #fff;
   filter: none;
   border-top: 0;
   border-radius: $default-border-radius;
@@ -206,7 +206,6 @@ div.mce-tinymce-inline {
   right: 2px;
   opacity: 0.4;
   filter: alpha(opacity=40);
-  zoom: 1;
 }
 
 .mce-scrollbar-h {
@@ -222,7 +221,7 @@ div.mce-tinymce-inline {
   position: absolute;
   background-color: #000;
   border: 1px solid #888;
-  border-color: rgba(85,85,85,0.6);
+  border-color: rgba(85, 85, 85, 0.6);
   width: 5px;
   height: 100%;
   -webkit-border-radius: 7px;
@@ -237,10 +236,9 @@ div.mce-tinymce-inline {
 
 .mce-scrollbar.mce-active,
 .mce-scrollbar:hover {
-  background-color: #AAA;
+  background-color: #aaa;
   opacity: 0.6;
   filter: alpha(opacity=60);
-  zoom: 1;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
@@ -289,17 +287,16 @@ div.mce-tinymce-inline {
     filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
     background: transparent;
     border-radius: $default-border-radius;
-    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     top: 0;
     left: 0;
     background: #fff;
     border: 1px solid $default-border-color;
-    border: 1px solid rgba(0,0,0,0.25);
+    border: 1px solid rgba(0, 0, 0, 0.25);
   }
 
   &.mce-popover.mce-bottom {
     margin-top: 10px;
-    *margin-top: 0;
   }
 
   &.mce-popover.mce-bottom > .mce-arrow {
@@ -307,7 +304,7 @@ div.mce-tinymce-inline {
     margin-left: -11px;
     border-top-width: 0;
     border-bottom-color: $default-border-color;
-    border-bottom-color: rgba(0,0,0,0.25);
+    border-bottom-color: rgba(0, 0, 0, 0.25);
     top: -11px;
   }
 
@@ -444,7 +441,9 @@ div.mce-tinymce-inline {
     border-radius: $default-border-radius;
     border: 0 none;
 
-    &:hover, &:focus, &:active {
+    &:hover,
+    &:focus,
+    &:active {
       width: auto !important;
       background: $button-hover-bg-color !important;
       border-color: $button-hover-border-color;
@@ -516,14 +515,14 @@ body .mce-abs-layout-item {
 .mce-tooltip {
   position: absolute;
   padding: 5px;
-  transition-delay: .3s;
+  transition-delay: 0.3s;
 }
 
 .mce-tooltip-inner {
   background-color: $tooltip-background-color;
   color: $white;
   max-width: 200px;
-  padding: $default-padding 2*$default-padding;
+  padding: $default-padding 2 * $default-padding;
   text-align: center;
   white-space: normal;
   box-shadow: 0 0 4px $default-border-color;
@@ -640,37 +639,27 @@ body .mce-abs-layout-item {
   position: relative;
   text-shadow: $button-text-shadow;
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
   box-shadow: none;
   background-color: $light-gray;
 
   &:focus,
   &:hover {
     color: $text-color;
-
-    button {
-      background: inherit;
-    }
   }
 
   &:hover {
-    background-color: darken($medium-gray, 3%);
-  }
-
-  &:focus {
-    background-color: $focus-color;
+    background-color: $default-border-color;
   }
 
   button {
-    padding: 2px 4px;
+    padding: 5px $default-padding;
     font-size: 12px;
     line-height: 20px;
-    *line-height: 16px;
     cursor: pointer;
     color: $text-color;
     text-align: center;
     overflow: visible;
+    appearance: none;
     -webkit-appearance: none;
     border-radius: inherit;
     box-shadow: none;
@@ -695,15 +684,17 @@ body .mce-abs-layout-item {
     text-shadow: 1px 1px #fff;
   }
 
-  &.mce-disabled button,
-  &.mce-disabled:hover button {
-    cursor: default;
-    box-shadow: none;
-    opacity: 0.4;
-    filter: alpha(opacity=40);
-    zoom: 1;
-  }
+  &.mce-disabled,
+  &.mce-disabled:hover {
+    background-color: transparent;
 
+    button {
+      cursor: default;
+      box-shadow: none;
+      opacity: 0.4;
+      filter: alpha(opacity=40);
+    }
+  }
   &.mce-active,
   &.mce-active:hover {
     background-color: $default-border-color;
@@ -732,29 +723,25 @@ body .mce-abs-layout-item {
 .mce-btn-small button {
   padding: 1px 5px;
   font-size: 12px;
-  *padding-bottom: 2px;
 }
 
 .mce-btn-small i {
   line-height: 20px;
   vertical-align: top;
-  *line-height: 18px;
 }
 
 .mce-btn .mce-caret {
-  margin-top: 8px;
-  margin-left: 0;
+  margin-top: 2px;
+  margin-left: 2px;
 }
 
 .mce-btn-small .mce-caret {
-  margin-top: 8px;
-  margin-left: 0;
+  margin-top: 2px;
+  margin-left: 2px;
 }
 
 .mce-caret {
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
   width: 0;
   height: 0;
   vertical-align: top;
@@ -785,13 +772,13 @@ body .mce-abs-layout-item {
 
 .mce-btn-group .mce-first {
   border-left: 1px solid #b1b1b1;
-  border-left: 1px solid rgba(0,0,0,0.25);
+  border-left: 1px solid rgba(0, 0, 0, 0.25);
   @include border-left-radius($default-border-radius);
 }
 
 .mce-btn-group .mce-last {
   border-right: 1px solid #b1b1b1;
-  border-right: 1px solid rgba(0,0,0,0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
   @include border-right-radius($default-border-radius);
 }
 
@@ -811,20 +798,24 @@ i.mce-i-checkbox {
   margin: 0 3px 0 0;
   border: 1px solid #c5c5c5;
   border-radius: $default-border-radius;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.05);
   background-color: #f0f0f0;
-  background-image: -moz-linear-gradient(top,#fff,#d9d9d9);
-  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#d9d9d9));
-  background-image: -webkit-linear-gradient(top,#fff,#d9d9d9);
-  background-image: -o-linear-gradient(top,#fff,#d9d9d9);
-  background-image: linear-gradient(to bottom,#fff,#d9d9d9);
+  background-image: -moz-linear-gradient(top, #fff, #d9d9d9);
+  background-image: -webkit-gradient(
+    linear,
+    0 0,
+    0 100%,
+    from(#fff),
+    to(#d9d9d9)
+  );
+  background-image: -webkit-linear-gradient(top, #fff, #d9d9d9);
+  background-image: -o-linear-gradient(top, #fff, #d9d9d9);
+  background-image: linear-gradient(to bottom, #fff, #d9d9d9);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#ffffffff',endColorstr='#ffd9d9d9',GradientType=0);
-  zoom: 1;
   text-indent: -10em;
-  *font-size: 0;
-  *line-height: 0;
-  *text-indent: 0;
   overflow: hidden;
 }
 
@@ -931,11 +922,8 @@ i.mce-i-checkbox {
 
 .mce-combobox {
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
   border-radius: $default-border-radius;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-  *height: 32px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .mce-combobox input {
@@ -969,13 +957,10 @@ i.mce-i-checkbox {
   box-shadow: none;
   opacity: 0.4;
   filter: alpha(opacity=40);
-  zoom: 1;
 }
 
 .mce-path {
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
   padding: 4px 6px;
   white-space: normal;
 }
@@ -991,8 +976,6 @@ i.mce-i-checkbox {
 
 .mce-path-item {
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
   cursor: pointer;
   color: #333;
 }
@@ -1033,8 +1016,6 @@ i.mce-i-checkbox {
 
 .mce-fit-layout {
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
 }
 
 .mce-fit-layout-item {
@@ -1043,8 +1024,6 @@ i.mce-i-checkbox {
 
 .mce-flow-layout-item {
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
 }
 
 .mce-flow-layout-item {
@@ -1084,9 +1063,7 @@ i.mce-i-checkbox {
 
 .mce-label {
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
-  text-shadow: 0 1px 1px rgba(255,255,255,0.75);
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   border: 0;
   overflow: hidden;
 }
@@ -1148,8 +1125,7 @@ i.mce-i-checkbox {
 .mce-menubtn span {
   color: #333;
   margin-right: 2px;
-  line-height: 20px;
-  *line-height: 16px;
+  line-height: 16px;
 }
 
 .mce-menubtn.mce-btn-small span {
@@ -1167,10 +1143,6 @@ i.mce-i-checkbox {
   width: 70px;
 }
 
-.mce-menubtn .mce-caret {
-  *margin-top: 6px;
-}
-
 .mce-rtl .mce-menubtn button {
   direction: rtl;
   text-align: right;
@@ -1225,7 +1197,7 @@ i.mce-i-checkbox {
 
 .mce-menu-item.mce-selected .mce-text,
 .mce-menu-item:hover .mce-text {
-  color: #fff;
+  color: #fff !important;
 }
 
 .mce-menu-item.mce-selected .mce-ico,
@@ -1245,8 +1217,6 @@ i.mce-i-checkbox {
 
 .mce-menu-shortcut {
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
   padding: 0 15px 0 20px;
 }
 
@@ -1258,7 +1228,6 @@ i.mce-i-checkbox {
 
 .mce-menu-item .mce-caret {
   margin-top: 4px;
-  *margin-top: 3px;
   margin-right: 6px;
   border-top: 4px solid transparent;
   border-bottom: 4px solid transparent;
@@ -1271,10 +1240,6 @@ i.mce-i-checkbox {
   border-left-color: #fff;
 }
 
-.mce-menu-align .mce-menu-shortcut {
-  *margin-top: -2px;
-}
-
 .mce-menu-align .mce-caret,
 .mce-menu-align .mce-menu-shortcut {
   position: absolute;
@@ -1307,7 +1272,7 @@ i.mce-i-checkbox {
 .mce-menu-item:hover {
   text-decoration: none;
   color: #fff;
-  background: $button-hover-bg-color;
+  background: $dark-blue;
 }
 
 .mce-menu-item-sep:hover,
@@ -1361,10 +1326,10 @@ div.mce-menu .mce-menu-item-sep {
   min-width: 160px;
   background: #fff;
   border: 1px solid #989898;
-  border: 1px solid rgba(0,0,0,0.2);
+  border: 1px solid rgba(0, 0, 0, 0.2);
   z-index: 1002;
   border-radius: $default-border-radius;
-  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   max-height: 400px;
   overflow: auto;
   overflow-x: hidden;
@@ -1376,7 +1341,6 @@ div.mce-menu .mce-menu-item-sep {
 
 .mce-menu-has-icons i {
   display: inline-block;
-  *display: inline;
 }
 
 .mce-menu-sub-tr-tl {
@@ -1438,9 +1402,15 @@ i.mce-i-resize {
 }
 
 .mce-splitbtn .mce-open.mce-active {
-  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
+  -webkit-box-shadow:
+    inset 0 2px 4px rgba(0, 0, 0, 0.15),
+    0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow:
+    inset 0 2px 4px rgba(0, 0, 0, 0.15),
+    0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    inset 0 2px 4px rgba(0, 0, 0, 0.15),
+    0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .mce-splitbtn.mce-btn-small .mce-open {
@@ -1473,13 +1443,11 @@ i.mce-i-resize {
 
 .mce-tab {
   display: inline-block;
-  *display: inline;
-  *zoom: 1;
   border: 1px solid #c5c5c5;
   border-width: 0 1px 0 0;
   background: #e3e3e3;
   padding: 8px;
-  text-shadow: 0 1px 1px rgba(255,255,255,0.75);
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   height: 13px;
   cursor: pointer;
 }
@@ -1519,7 +1487,9 @@ i.mce-i-resize {
   border-radius: $default-border-radius;
   box-shadow: $form-field-box-shadow;
   display: inline-block;
-  transition: border linear 0.2s, box-shadow linear 0.2s;
+  transition:
+    border linear 0.2s,
+    box-shadow linear 0.2s;
   resize: none;
   white-space: pre-wrap;
   color: $form-field-text-color;
@@ -1560,30 +1530,32 @@ i.mce-i-resize {
   height: 100%;
   opacity: 0.6;
   filter: alpha(opacity=60);
-  zoom: 1;
-  background: #fff url('tinymce/skins/alchemy/fonts/img/loader.gif') no-repeat center center;
+  background: #fff url("tinymce/skins/alchemy/fonts/img/loader.gif") no-repeat
+    center center;
 }
 
 @font-face {
-  font-family: 'tinymce';
-  src: url('tinymce/skins/alchemy/fonts/tinymce.woff') format('woff'),
-       url('tinymce/skins/alchemy/fonts/tinymce.ttf') format('truetype'),
-       url('tinymce/skins/alchemy/fonts/tinymce.svg#tinymce') format('svg');
+  font-family: "tinymce";
+  src:
+    url("tinymce/skins/alchemy/fonts/tinymce.woff") format("woff"),
+    url("tinymce/skins/alchemy/fonts/tinymce.ttf") format("truetype"),
+    url("tinymce/skins/alchemy/fonts/tinymce.svg#tinymce") format("svg");
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'tinymce-small';
-  src: url('tinymce/skins/alchemy/fonts/tinymce-small.woff') format('woff'),
-       url('tinymce/skins/alchemy/fonts/tinymce-small.ttf') format('truetype'),
-       url('tinymce/skins/alchemy/fonts/tinymce-small.svg#tinymce') format('svg');
+  font-family: "tinymce-small";
+  src:
+    url("tinymce/skins/alchemy/fonts/tinymce-small.woff") format("woff"),
+    url("tinymce/skins/alchemy/fonts/tinymce-small.ttf") format("truetype"),
+    url("tinymce/skins/alchemy/fonts/tinymce-small.svg#tinymce") format("svg");
   font-weight: normal;
   font-style: normal;
 }
 
 .mce-ico {
-  font-family: 'tinymce', Arial;
+  font-family: "tinymce", Arial;
   font-style: normal;
   font-weight: normal;
   font-size: 12px;
@@ -1599,7 +1571,7 @@ i.mce-i-resize {
 }
 
 .mce-btn-small .mce-ico {
-  font-family: 'tinymce-small', Arial;
+  font-family: "tinymce-small", Arial;
 }
 
 .mce-i-save:before {

data/app/components/alchemy/admin/node_select.rb

@@ -0,0 +1,39 @@
+module Alchemy
+  module Admin
+    class NodeSelect < ViewComponent::Base
+      delegate :alchemy, to: :helpers
+
+      def initialize(node = nil, url: nil, placeholder: Alchemy.t(:search_node), query_params: nil)
+        @node = node
+        @url = url
+        @placeholder = placeholder
+        @query_params = query_params
+      end
+
+      def call
+        content_tag("alchemy-node-select", content, attributes)
+      end
+
+      private
+
+      def attributes
+        options = {
+          "allow-clear": true,
+          placeholder: @placeholder,
+          url: @url || alchemy.api_nodes_path
+        }
+
+        if @query_params
+          options[:"query-params"] = @query_params.to_json
+        end
+
+        if @node
+          selection = ActiveModelSerializers::SerializableResource.new(@node, include: :ancestors)
+          options[:selection] = selection.to_json
+        end
+
+        options
+      end
+    end
+  end
+end

data/app/components/alchemy/admin/page_select.rb

@@ -0,0 +1,42 @@
+module Alchemy
+  module Admin
+    class PageSelect < ViewComponent::Base
+      delegate :alchemy, to: :helpers
+
+      def initialize(page = nil, url: nil, allow_clear: false, placeholder: Alchemy.t(:search_page), query_params: nil)
+        @page = page
+        @url = url
+        @allow_clear = allow_clear
+        @placeholder = placeholder
+        @query_params = query_params
+      end
+
+      def call
+        content_tag("alchemy-page-select", content, attributes)
+      end
+
+      private
+
+      def attributes
+        options = {
+          placeholder: @placeholder,
+          url: @url || alchemy.api_pages_path
+        }
+
+        options = options.merge({"allow-clear": @allow_clear}) if @allow_clear
+        options = options.merge({"query-params": @query_params.to_json}) if @query_params
+
+        if @page
+          selection = {
+            id: @page.id,
+            name: @page.name,
+            url_path: @page.url_path
+          }
+          options = options.merge({selection: selection.to_json})
+        end
+
+        options
+      end
+    end
+  end
+end

data/app/components/alchemy/ingredients/audio_view.rb

@@ -4,7 +4,7 @@ module Alchemy
       def call
         content_tag(:audio, **html_options) do
           tag(:source, src: src, type: type)
-        end.html_safe
+        end
       end
 
       def render?

data/app/components/alchemy/ingredients/base_view.rb

@@ -16,7 +16,7 @@ module Alchemy
       end
 
       def call
-        value.html_safe
+        value
       end
 
       def render?

data/app/components/alchemy/ingredients/boolean_view.rb

@@ -2,7 +2,7 @@ module Alchemy
   module Ingredients
     class BooleanView < BaseView
       def call
-        Alchemy.t(value.to_s, scope: "ingredient_values.boolean").html_safe
+        Alchemy.t(value, scope: "ingredient_values.boolean")
       end
 
       def render?

data/app/components/alchemy/ingredients/datetime_view.rb

@@ -11,12 +11,11 @@ module Alchemy
       end
 
       def call
-        datetime = ingredient.value.in_time_zone(Rails.application.config.time_zone)
         if date_format == "rfc822"
-          datetime.try(:to_fs, :rfc822) || datetime.to_s(:rfc822)
+          ingredient.value.to_s(:rfc822)
         else
-          ::I18n.l(datetime, format: date_format)
-        end.html_safe
+          ::I18n.l(ingredient.value, format: date_format)
+        end
       end
     end
   end

data/app/components/alchemy/ingredients/file_view.rb

@@ -23,7 +23,7 @@ module Alchemy
             class: ingredient.css_class.presence,
             title: ingredient.title.presence
           }.merge(html_options)
-        ).html_safe
+        )
       end
 
       def render?

data/app/components/alchemy/ingredients/headline_view.rb

@@ -7,22 +7,13 @@ module Alchemy
       end
 
       def call
-        content_tag tag_name, id: dom_id, class: css_classes do
-          ingredient.value
-        end.html_safe
-      end
-
-      private
-
-      def tag_name = "h#{@level || ingredient.level}"
-
-      def dom_id = ingredient.dom_id.presence
-
-      def css_classes
-        [
-          ingredient.size ? "h#{ingredient.size}" : nil,
-          html_options[:class]
-        ]
+        content_tag "h#{@level || ingredient.level}",
+          ingredient.value,
+          id: ingredient.dom_id.presence,
+          class: [
+            ingredient.size ? "h#{ingredient.size}" : nil,
+            html_options[:class]
+          ]
       end
     end
   end

data/app/components/alchemy/ingredients/link_view.rb

@@ -12,7 +12,7 @@ module Alchemy
       end
 
       def call
-        link_to(link_text, value, {target: link_target}.merge(html_options)).html_safe
+        link_to(link_text, value, {target: link_target}.merge(html_options))
       end
 
       private

data/app/components/alchemy/ingredients/page_view.rb

@@ -4,7 +4,7 @@ module Alchemy
       delegate :page, to: :ingredient
 
       def call
-        link_to(page.name, alchemy.show_page_path(urlname: page.urlname)).html_safe
+        link_to page.name, alchemy.show_page_path(urlname: page.urlname)
       end
 
       def render?