Add feature flag to allow custom text colors

REDMINE-21001

Author: tf

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -48,6 +48,7 @@ def configure(config)
         c.features.register('frontend_v2')
         c.features.register('scrolled_entry_fragment_caching')
         c.features.register('backdrop_content_elements')
+        c.features.register('custom_palette_colors')
 
         c.additional_frontend_seed_data.register(
           'frontendVersion',

entry_types/scrolled/package/src/contentElements/textBlock/editor.js

@@ -11,9 +11,35 @@ editor.contentElementTypes.register('textBlock', {
   supportedPositions: ['inline'],
 
   configurationEditor({entry, contentElement}) {
-    this.listenTo(contentElement.transientState,
-                  'change:exampleNode',
-                  () => this.refresh());
+    let pendingRefresh;
+
+    this.listenTo(
+      contentElement.transientState,
+      'change:exampleNode',
+      () => {
+        // This is a terrible hack to prevent closing the minicolors
+        // dropdown while adjusting colors. Calling refresh is needed
+        // to update typography drop downs. Delay until color picker
+        // is closed.
+        if (document.activeElement &&
+            document.activeElement.tagName === 'INPUT' &&
+            document.activeElement.className === 'minicolors-input') {
+
+          if (!pendingRefresh) {
+            document.activeElement.addEventListener('blur', () => {
+              pendingRefresh = false;
+              this.refresh()
+            }, {once: true});
+
+            pendingRefresh = true;
+          }
+
+          return;
+        }
+
+        this.refresh()
+      }
+    );
 
     this.tab('general', function() {
       const exampleNode = ensureTextContent(

entry_types/scrolled/package/src/editor/views/configurationEditors/groups/CommonContentElementAttributes.js

@@ -1,9 +1,20 @@
-import {ConfigurationEditorTabView, CheckBoxInputView, SelectInputView, SliderInputView} from 'pageflow/ui';
+import {features} from 'pageflow/frontend';
+
+import {
+  ConfigurationEditorTabView,
+  CheckBoxInputView,
+  SelectInputView,
+  SliderInputView
+} from 'pageflow/ui';
 
 import {
   TypographyVariantSelectInputView
 } from '../../inputs/TypographyVariantSelectInputView';
 
+import {
+  ColorSelectOrCustomColorInputView
+} from '../../inputs/ColorSelectOrCustomColorInputView';
+
 import {
   ColorSelectInputView
 } from '../../inputs/ColorSelectInputView';
@@ -144,14 +155,20 @@ ConfigurationEditorTabView.groups.define(
   'PaletteColor',
   function({propertyName, entry, model}) {
     const [values, texts] = entry.getPaletteColors();
+    const inputView = features.isEnabled('custom_palette_colors') ?
+                      ColorSelectOrCustomColorInputView :
+                      ColorSelectInputView;
 
     if (values.length) {
-      this.input(propertyName, ColorSelectInputView, {
+      this.input(propertyName, inputView, {
         model: model || this.model,
         includeBlank: true,
         blankTranslationKey: 'pageflow_scrolled.editor.' +
                              'common_content_element_attributes.' +
                              'palette_color.blank',
+        customColorTranslationKey: 'pageflow_scrolled.editor.' +
+                                   'common_content_element_attributes.' +
+                                   'palette_color.custom',
         values,
         texts,
       });