Discussions RCE

closes CNVS-27641
closes CNVS-27643

Start RCE service integration with granular
feature flags for sidebar areas

TEST PLAN:
 1) regression test creating a discussion and entry
    (should not break)
 2) with RCE service in the mix and the RICH_CONTENT high risk flag
    on, side bar should show replaced
    by dummy sidebar from RCE service
 3) note that we do not expect the sidebar to be functional yet
    with the service, this is just making sure we can flip the
    switch, and didn't break discussions in the process

Change-Id: Iadd2c0412226a113839869942a82c1885a90a789
Reviewed-on: https://gerrit.instructure.com/73698
Tested-by: Jenkins
Reviewed-by: Jacob Fugal <[email protected]>
QA-Review: Jeremy Putnam <[email protected]>
Product-Review: Ethan Vizitei <[email protected]>

app/coffeescripts/discussions/Reply.coffee

@@ -9,9 +9,14 @@ define [
   'compiled/fn/preventDefault'
   'compiled/views/editor/KeyboardShortcuts'
   'str/stripTags'
+  'jsx/shared/rce/RichContentEditor'
   'tinymce.editor_box'
   'jquery.instructure_forms'
-], (Backbone, _, I18n, $, Entry, htmlEscape, replyAttachmentTemplate, preventDefault, KeyboardShortcuts, stripTags) ->
+], (Backbone, _, I18n, $, Entry, htmlEscape, replyAttachmentTemplate,
+      preventDefault, KeyboardShortcuts, stripTags, RichContentEditor) ->
+
+  richContentEditor = new RichContentEditor({riskLevel: "highrisk"})
+  richContentEditor.preloadRemoteModule()
 
   class Reply
 
@@ -30,7 +35,7 @@ define [
       @form.find('.cancel_button').click @hide
       @form.on 'click', '.toggle-wrapper a', (e) =>
         e.preventDefault()
-        @textArea.editorBox('toggle')
+        richContentEditor.callOnRCE(@textArea, 'toggle')
         # hide the clicked link, and show the other toggle link.
         # todo: replace .andSelf with .addBack when JQuery is upgraded.
         $(e.currentTarget).siblings('a').andSelf().toggle()
@@ -60,7 +65,12 @@ define [
     edit: ->
       @form.addClass 'replying'
       @discussionEntry.addClass 'replying'
-      @textArea.editorBox focus: true, tinyOptions: width: '100%'
+      richContentEditor.loadNewEditor(@textArea, {
+        focus: true,
+        tinyOptions: {
+          width: '100%'
+        }
+      })
       @editing = true
       @trigger 'edit', this
 
@@ -168,4 +178,3 @@ define [
   _.extend Reply.prototype, Backbone.Events
 
   Reply
-

app/coffeescripts/editor/EditorToggle.coffee

@@ -5,8 +5,12 @@ define [
   'Backbone'
   'compiled/fn/preventDefault'
   'compiled/views/editor/KeyboardShortcuts'
+  'jsx/shared/rce/RichContentEditor'
   'tinymce.editor_box'
-], (_, I18n, $, Backbone, preventDefault, KeyboardShortcuts) ->
+], (_, I18n, $, Backbone, preventDefault, KeyboardShortcuts, RichContentEditor) ->
+
+  richContentEditor = new RichContentEditor({riskLevel: "highrisk"})
+  richContentEditor.preloadRemoteModule()
 
   ###
   xsslint safeString.property content
@@ -63,7 +67,7 @@ define [
       opts = {focus: true, tinyOptions: {}}
       if @options.editorBoxLabel
         opts.tinyOptions.aria_label = @options.editorBoxLabel
-      @textArea.editorBox opts
+      richContentEditor.loadNewEditor(@textArea, opts)
       @editing = true
       @trigger 'edit'
 
@@ -135,7 +139,7 @@ define [
       $switchViewsContainer = $('<div/>', style: "float: right")
       $switchViewsContainer.append($switchToHtmlLink, $switchToVisualLink)
       $switchViewsContainer.find('a').click preventDefault (e) =>
-        @textArea.editorBox('toggle')
+        richContentEditor.callOnRCE(@textarea, 'toggle')
         # hide the clicked link, and show the other toggle link.
         # todo: replace .andSelf with .addBack when JQuery is upgraded.
         $(e.currentTarget).siblings('a').andSelf().toggle()

app/coffeescripts/views/DiscussionTopic/TopicView.coffee

@@ -10,10 +10,12 @@ define [
   'jst/discussions/_reply_form'
   'compiled/discussions/Reply'
   'compiled/widget/assignmentRubricDialog'
+  'jsx/shared/rce/RceCommandShim'
+  'str/htmlEscape'
   'compiled/util/wikiSidebarWithMultipleEditors'
   'jquery.instructure_misc_helpers' #scrollSidebar
-  'str/htmlEscape'
-], (I18n, $, Backbone, _, DiscussionTopic, EntriesView, EntryView, PublishButtonView, replyTemplate, Reply, assignmentRubricDialog, htmlEscape) ->
+], (I18n, $, Backbone, _, DiscussionTopic, EntriesView, EntryView, PublishButtonView,
+    replyTemplate, Reply, assignmentRubricDialog, RceCommandShim, htmlEscape) ->
 
   class TopicView extends Backbone.View
 
@@ -93,7 +95,7 @@ define [
     toggleEditorMode: (event) ->
       event.preventDefault()
       event.stopPropagation()
-      @$textarea.editorBox('toggle')
+      new RceCommandShim().send(@$textarea, 'toggle')
       # hide the clicked link, and show the other toggle link.
       # todo: replace .andSelf with .addBack when JQuery is upgraded.
       $(event.currentTarget).siblings('.rte_switch_views_link').andSelf().toggle()

app/coffeescripts/views/DiscussionTopics/EditView.coffee

@@ -9,6 +9,7 @@ define [
   'underscore'
   'jst/DiscussionTopics/EditView'
   'wikiSidebar'
+  'jsx/shared/rce/RichContentEditor'
   'str/htmlEscape'
   'compiled/models/DiscussionTopic'
   'compiled/models/Announcement'
@@ -22,9 +23,12 @@ define [
   'jquery.instructure_misc_helpers' # $.scrollSidebar
   'compiled/jquery.rails_flash_notifications' #flashMessage
 ], (I18n, ValidatedFormView, AssignmentGroupSelector, GradingTypeSelector,
-GroupCategorySelector, PeerReviewsSelector, PostToSisSelector, _, template, wikiSidebar,
+GroupCategorySelector, PeerReviewsSelector, PostToSisSelector, _, template, wikiSidebar, RichContentEditor,
 htmlEscape, DiscussionTopic, Announcement, Assignment, $, preventDefault, MissingDateDialog, KeyboardShortcuts) ->
 
+  richContentEditor = new RichContentEditor({riskLevel: "highrisk", sidebar: wikiSidebar})
+  richContentEditor.preloadRemoteModule()
+
   class EditView extends ValidatedFormView
 
     template: template
@@ -106,11 +110,11 @@ htmlEscape, DiscussionTopic, Announcement, Assignment, $, preventDefault, Missin
       @_initializeWikiSidebar ($textarea)
 
       _.defer ->
-        $textarea.editorBox()
+        richContentEditor.loadNewEditor($textarea)
         $('.rte_switch_views_link').click (event) ->
           event.preventDefault()
           event.stopPropagation()
-          $textarea.editorBox 'toggle'
+          richContentEditor.callOnRCE($textarea, 'toggle')
           # hide the clicked link, and show the other toggle link.
           # todo: replace .andSelf with .addBack when JQuery is upgraded.
           $(event.currentTarget).siblings('.rte_switch_views_link').andSelf().toggle()
@@ -132,11 +136,9 @@ htmlEscape, DiscussionTopic, Announcement, Assignment, $, preventDefault, Missin
         $('.rte_switch_views_link').first().before((new KeyboardShortcuts()).render().$el)
 
     _initializeWikiSidebar:(textarea) =>
-      unless wikiSidebar.inited
-        wikiSidebar.init()
-        $.scrollSidebar()
-      wikiSidebar.attachToEditor textarea
-      wikiSidebar.show()
+      richContentEditor.initSidebar()
+      $.scrollSidebar()
+      richContentEditor.attachSidebarTo(textarea)
 
     renderAssignmentGroupOptions: =>
       @assignmentGroupSelector = new AssignmentGroupSelector

app/controllers/discussion_topics_controller.rb

@@ -237,6 +237,7 @@
 #
 class DiscussionTopicsController < ApplicationController
   before_filter :require_context_and_read_access, :except => :public_feed
+  before_filter :rich_content_service_config
 
   include Api::V1::DiscussionTopics
   include Api::V1::Assignment
@@ -817,6 +818,10 @@ def reorder
 
   protected
 
+  def rich_content_service_config
+    js_env(Services::RichContent.env_for(@domain_root_account, risk_level: :highrisk))
+  end
+
   def cancel_redirect_url
     topic_type = @topic.is_announcement ? :announcements : :discussion_topics
     @topic.new_record? ? polymorphic_url([@context, topic_type]) : polymorphic_url([@context, @topic])

public/javascripts/instructure.js

@@ -26,6 +26,7 @@ define([
   'compiled/userSettings',
   'str/htmlEscape',
   'wikiSidebar',
+  'jsx/shared/rce/RichContentEditor',
   'instructure_helper',
   'jqueryui/draggable',
   'jquery.ajaxJSON' /* ajaxJSON */,
@@ -53,7 +54,10 @@ define([
   'compiled/behaviors/trackEvent',
   'compiled/badge_counts',
   'vendor/jquery.placeholder'
-], function(KeyboardNavDialog, INST, I18n, $, _, tz, userSettings, htmlEscape, wikiSidebar) {
+], function(KeyboardNavDialog, INST, I18n, $, _, tz, userSettings, htmlEscape, wikiSidebar, RichContentEditor) {
+
+  var richContentEditor = new RichContentEditor({riskLevel: "sidebar", sidebar: wikiSidebar})
+  richContentEditor.preloadRemoteModule()
 
   $.trackEvent('Route', location.pathname.replace(/\/$/, '').replace(/\d+/g, '--') || '/');
 
@@ -479,22 +483,19 @@ define([
       if(!$editor || $editor.length === 0) { return; }
       $editor = $($editor);
       if(!$editor || $editor.length === 0) { return; }
-      $editor.editorBox();
-      $editor.editorBox('focus', true);
-      if(wikiSidebar) {
-        wikiSidebar.attachToEditor($editor);
+      richContentEditor.loadNewEditor($editor)
+      richContentEditor.callOnRCE($editor, 'focus', true)
+      richContentEditor.initSidebar()
+      richContentEditor.attachSidebarTo($editor, function(){
         $("#sidebar_content").hide();
-        wikiSidebar.show();
-      }
+      })
     }).bind('richTextEnd', function(event, $editor) {
       if(!$editor || $editor.length === 0) { return; }
       $editor = $($editor);
       if(!$editor || $editor.length === 0) { return; }
-      $editor.editorBox('destroy');
-      if(wikiSidebar) {
-        $("#sidebar_content").show();
-        wikiSidebar.hide();
-      }
+      richContentEditor.callOnRCE($editor, 'destroy');
+      richContentEditor.hideSidebar()
+      $("#sidebar_content").show();
     });
 
     $(".cant_record_link").click(function(event) {