Update select value if selection has color

ep.json

@@ -5,6 +5,7 @@
       "client_hooks": {
         "postAceInit": "ep_font_color/static/js/index",
         "aceInitialized": "ep_font_color/static/js/index",
+        "aceEditEvent": "ep_font_color/static/js/index",
         "aceEditorCSS": "ep_font_color/static/js/index",
         "aceCreateDomLine": "ep_font_color/static/js/index",
         "postToolbarInit": "ep_font_color/static/js/index",

static/js/index.js

@@ -94,9 +94,56 @@ const postToolbarInit = (hook, context) => {
   });
 };
 
+const aceEditEvent = (hook, call, cb) => {
+  const cs = call.callstack;
+  const attrManager = call.documentAttributeManager;
+  const rep = call.rep;
+  const allowedEvents = ['handleClick', 'handleKeyEvent'];
+  if (allowedEvents.indexOf(cs.type) === -1 && !(cs.docTextChanged)) {
+    return cb();
+  }
+
+  // If it's an initial setup event then do nothing..
+  if (cs.type === 'setBaseText' || cs.type === 'setup') return cb();
+  // It looks like we should check to see if this section has this attribute
+  setTimeout(() => { // avoid race condition..
+    const colorSelect = $('.color-selection, #color-selection');
+    colorSelect.val('dummy'); // reset value to the dummy value
+    colorSelect.niceSelect('update');
+    // Attribtes are never available on the first X caret position so we need to ignore that
+    if (rep.selStart[1] === 0) {
+      // Attributes are never on the first line
+      return;
+    }
+    // The line has an attribute set, this means it wont get hte correct X caret position
+    if (rep.selStart[1] === 1) {
+      if (rep.alltext[0] === '*') {
+        // Attributes are never on the "first" character of lines with attributes
+        return;
+      }
+    }
+    // the caret is in a new position.. Let's do some funky shit
+    const startAttribs = attrManager.getAttributesOnPosition(rep.selStart[0], rep.selStart[1]);
+    const endAttribs = attrManager.getAttributesOnPosition(rep.selEnd[0], rep.selEnd[1]);
+    const [startColor] = startAttribs.filter((item) => item[0] === 'color');
+    const [endColor] = endAttribs.filter((item) => item[0] === 'color');
+    if (!startColor && !endColor) return;
+    $.each(colors, (k, v) => {
+      if (startColor && startColor[1] === v && (!endColor || endColor[1] === v)) {
+        colorSelect.val(k);
+      } else if (!startColor && endColor[1] === v) {
+        colorSelect.val(k);
+      }
+    });
+    colorSelect.niceSelect('update');
+  }, 250);
+
+  return cb();
+};
 // Export all hooks
 exports.postToolbarInit = postToolbarInit;
 exports.aceInitialized = aceInitialized;
 exports.postAceInit = postAceInit;
 exports.aceAttribsToClasses = aceAttribsToClasses;
+exports.aceEditEvent = aceEditEvent;
 exports.aceEditorCSS = () => ['ep_font_color/static/css/color.css'];

static/tests/frontend/specs/test.js

@@ -36,7 +36,7 @@ describe('Set Font Color and ensure its removed properly', function () {
       return expect(elementHasClass).to.be(true);
     }).done(() => {
       $firstTextElement = inner$('div').first();
-      $firstTextElement.sendkeys('{selectall}');
+
       // sets first line to Font Color black
       chrome$('.color-selection').val('0');
       chrome$('.color-selection').change();
@@ -49,4 +49,31 @@ describe('Set Font Color and ensure its removed properly', function () {
       });
     });
   });
+
+  it('Changes color to red selects text again to check selector', function (done) {
+    this.timeout(60000);
+    const chrome$ = helper.padChrome$;
+    const inner$ = helper.padInner$;
+
+    let $firstTextElement = inner$('div').first();
+    $firstTextElement.sendkeys('{selectall}');
+    $firstTextElement.trigger('click');
+    // sets first line to Font Color red
+    chrome$('.color-selection').val('1');
+    chrome$('.color-selection').change();
+
+    const fElement = inner$('div').first();
+    helper.waitFor(() => {
+      const elementHasClass = fElement.children().first().hasClass('color:red');
+      return expect(elementHasClass).to.be(true);
+    }).done(() => {
+      $firstTextElement = inner$('div').first();
+      $firstTextElement.sendkeys('{rightarrow}');
+      $firstTextElement.sendkeys('{leftarrow}');
+      helper.waitFor(() => chrome$('.color-selection').val() === '1').done(() => {
+        expect(chrome$('.color-selection').val()).to.be('1');
+        done();
+      });
+    });
+  });
 });