ensure sidebar shows when focusing rcs editor

refs CNVS-30691

test plan:
- test agains rcs with https://gerrit.instructure.com/#/c/86606/
- enable high risk rcs flag
- edit or create a quiz
- add a question (multiple choice)
- click the edit icon next to an answer to bring up rce
- enter text and click done
- scroll up, sidebar should be gone.
- focus the rce for the question text
- the sidebar should appear

Change-Id: I60440c5175be4fd39b542a8918e22f4ddf4bf54d
Reviewed-on: https://gerrit.instructure.com/86733
Tested-by: Jenkins
Reviewed-by: Simon Williams <simon@instructure.com>
QA-Review: Benjamin Christian Nelson <bcnelson@instructure.com>
Product-Review: Ian Hoerner <ian@instructure.com>

app/jsx/shared/rce/RichContentEditor.jsx

@@ -112,16 +112,24 @@ define([
           establishParentNode(target)
         }
 
+        const originalOnFocus = tinyMCEInitOptions.onFocus
+        tinyMCEInitOptions.onFocus = (editor) => {
+          this.activateRCE(target)
+          if (typeof originalOnFocus === 'function') {
+            originalOnFocus(editor)
+          }
+        }
+
         loadServiceRCE(target, tinyMCEInitOptions, callback)
       } else {
         loadLegacyRCE(target, tinyMCEInitOptions, callback)
+
+        // listen for editor_box_focus events on our target, and trigger
+        // activateRCE from them
+        target.on('editor_box_focus', () => this.activateRCE(target))
       }
 
       hideResizeHandleForScreenReaders()
-
-      // listen for editor_box_focus events on our target, and trigger
-      // activateRCE from them
-      target.on('editor_box_focus', () => this.activateRCE(target))
     },
 
     /**

app/jsx/shared/rce/serviceRCELoader.jsx

@@ -159,7 +159,8 @@ define([
         textareaId: textarea.id,
         textareaClassName: textarea.className,
         language: ENV.LOCALE,
-        mirroredAttrs: this._attrsToMirror(textarea)
+        mirroredAttrs: this._attrsToMirror(textarea),
+        onFocus: tinyMCEInitOptions.onFocus
       }
     },
 

spec/coffeescripts/jsx/shared/rce/RichContentEditorSpec.coffee

@@ -37,6 +37,7 @@ define [
       fixtures.setup()
       @$target = fixtures.create('<textarea id="myEditor" />')
       sinon.stub(RCELoader, 'loadOnTarget')
+      @stub(Sidebar, 'show')
 
     teardown: ->
       fakeENV.teardown()
@@ -48,7 +49,7 @@ define [
     sinon.stub(RichContentEditor, 'freshNode').withArgs(@$target).returns(@$target)
     options = {}
     RichContentEditor.loadNewEditor(@$target, options)
-    ok RCELoader.loadOnTarget.calledWith(@$target, options)
+    ok RCELoader.loadOnTarget.calledWith(@$target, sinon.match(options))
     RichContentEditor.freshNode.restore()
 
   test 'calls editorBox and set_code when feature flag off', ->
@@ -76,16 +77,29 @@ define [
     # false so we don't have to stub out RCELoader.loadOnTarget
     ENV.RICH_CONTENT_SERVICE_ENABLED = false
     RichContentEditor.initSidebar()
-    sinon.spy(Sidebar, 'show')
     RichContentEditor.loadNewEditor(@$target, {focus: true})
     ok Sidebar.show.called
-    Sidebar.show.restore()
 
   test 'hides resize handle when called', ->
     $resize = fixtures.create('<div class="mce-resizehandle"></div>')
     RichContentEditor.loadNewEditor(@$target, {})
     equal $resize.attr('aria-hidden'), "true"
 
+  test 'passes onFocus to loadOnTarget', ->
+    options = {}
+    RichContentEditor.loadNewEditor(@$target, options)
+    onFocus = RCELoader.loadOnTarget.firstCall.args[1].onFocus
+    onFocus()
+    ok Sidebar.show.called
+
+  test 'onFocus calls options.onFocus if exists', ->
+    options = {onFocus: @spy()}
+    RichContentEditor.loadNewEditor(@$target, options)
+    onFocus = RCELoader.loadOnTarget.firstCall.args[1].onFocus
+    editor = {}
+    onFocus(editor)
+    ok options.onFocus.calledWith(editor)
+
   module 'RichContentEditor - callOnRCE',
     setup: ->
       fakeENV.setup()

spec/coffeescripts/jsx/shared/rce/serviceRCELoaderSpec.coffee

@@ -129,6 +129,11 @@ define [
     props = RCELoader.createRCEProps(@$textarea.get(0), opts)
     equal props.mirroredAttrs.name, "elementName"
 
+  test 'adds onFocus to props', ->
+    opts = {onFocus: ->}
+    props = RCELoader.createRCEProps(@$textarea.get(0), opts)
+    equal props.onFocus, opts.onFocus
+
   test 'renders with rce', ->
     RCELoader.loadOnTarget(@$div, {}, ()->)
     ok @rce.renderIntoDiv.calledWith(@$div.get(0))