upgrade canvas to tinymce 4.5.7

also uses new npm module for the tinymce-light-skin

closes CNVS-30080

test plan:
- turn off RCS features for tinymce
- thorough test of the tinymce editor in all locations
- one visible added feature is to create a table and look
  for the table context menu

Change-Id: If0396e79ffd58cab6ba6ec45a871f477a3f1feba
Reviewed-on: https://gerrit.instructure.com/107020
Tested-by: Jenkins
Reviewed-by: Brent Burgoyne <bburgoyne@instructure.com>
Product-Review: brian kirkby <bkirkby@instructure.com>
QA-Review: Tucker McKnight <tmcknight@instructure.com>

app/jsx/shared/rce/editorOptions.js

@@ -20,6 +20,7 @@ import _ from 'underscore'
 import EditorConfig from 'tinymce.config'
 import setupAndFocusTinyMCEConfig from 'setupAndFocusTinyMCEConfig'
 import INST from 'INST'
+import skin from 'tinymce-light-skin'
 
   function editorOptions (width, id, tinyMCEInitOptions, enableBookmarkingOverride, tinymce){
     var editorConfig = new EditorConfig(tinymce, INST, width, id);
@@ -27,8 +28,11 @@ import INST from 'INST'
     // RichContentEditor takes care of the autofocus functionality at a higher level
     var autoFocus = undefined
 
+    skin.use()
+
     return _.extend({},
       editorConfig.defaultConfig(),
+      {content_style: skin.contentStyle},
       setupAndFocusTinyMCEConfig(tinymce, autoFocus, enableBookmarkingOverride),
       (tinyMCEInitOptions.tinyOptions || {})
     );

package.json

@@ -12,7 +12,8 @@
     "fullcalendar": "https://github.com/ryankshaw/fullcalendar.git#aa686b36d10cee1e1e3ec7c7784145e46667d47d",
     "instructure-icons": "2.2.0",
     "instructure-ui": "1.4.2",
-    "tinymce": "4.1.9"
+    "tinymce": "4.5.7",
+    "tinymce-light-skin": "1.2.2"
   },
   "devDependencies": {
     "axe-core": "2.1.7",

public/javascripts/tinymce.config.js

@@ -65,8 +65,7 @@ define([], function(){
       selector: "#" + this.idAttribute,
       toolbar: this.toolbar(),
       theme: "modern",
-      skin: "light",
+      skin: false,
-      skin_url: "/vendor/tinymce_themes/light",
       plugins: "autolink,media,paste,table,textcolor,link,directionality,lists",
       external_plugins: {
         "instructure_image": "/javascripts/tinymce_plugins/instructure_image/plugin.js",

spec/coffeescripts/TinymceCommandsSpec.coffee

@@ -30,7 +30,7 @@ define [
     setup: ->
       testbed = $("<div id='command-testbed'></div>")
       $("#fixtures").append(testbed)
-      textarea = $("<textarea id='43' data-rich_text='true'></textarea>")
+      textarea = $("<textarea id='a43' data-rich_text='true'></textarea>")
       testbed.append(textarea)
       list = new EditorBoxList()
 
@@ -46,17 +46,17 @@ define [
     equal(textarea.data('rich_text'), false)
 
   test 'it causes tinymce to forget about the editor', ->
-    tinymce.init({selector: "#command-testbed textarea#43"})
+    tinymce.init({selector: "#command-testbed textarea#a43"})
-    equal(tinymce.activeEditor.id, '43')
+    equal(tinymce.activeEditor.id, 'a43')
     EditorCommands.remove(textarea, list)
     equal(undefined, tinymce.activeEditor)
 
   test 'it unregisters the editor from our global list', ->
     box = {}
-    list._addEditorBox('43', box)
+    list._addEditorBox('a43', box)
-    equal(box, list._editor_boxes['43'])
+    equal(box, list._editor_boxes['a43'])
     EditorCommands.remove(textarea, list)
-    equal(undefined, list._editor_boxes['43'])
+    equal(undefined, list._editor_boxes['a43'])
 
   QUnit.module "Tinymce Commands -> inserting content with tables",
     setup: ->
@@ -71,7 +71,7 @@ define [
       list = null
 
   test 'it keeps surrounding html when inserting links in a table', ->
-    textarea = $("<textarea id='43' data-rich_text='true'>
+    textarea = $("<textarea id='a43' data-rich_text='true'>
     <table>
       <tr>
         <td><span id='span'><a id='link' href='#'>Test Link</a></span></td>
@@ -80,13 +80,13 @@ define [
     </textarea>")
     testbed.append(textarea)
     list = new EditorBoxList()
-    tinymce.init({selector: "#command-testbed textarea#43"})
+    tinymce.init({selector: "#command-testbed textarea#a43"})
-    editor = tinymce.get(43)
+    editor = tinymce.get('a43')
 
     editor.selection.select(editor.dom.select('a')[0])
 
     new_link_id = "new_link"
     linkAttr = {target: "", title: "New Link", href: "/courses/1/pages/blah", class: "", id: new_link_id}
-    EditorCommands.insertLink(43, null, linkAttr)
+    EditorCommands.insertLink('a43', null, linkAttr)
 
     equal editor.selection.select(editor.dom.select('span')[0]).childNodes[0].id, new_link_id, "keeps surrounding span tag"

spec/coffeescripts/TinymceConfigSpec.coffee

@@ -72,7 +72,7 @@ define [
     INST.maxVisibleEditorButtons = 2
     config = new EditorConfig(fake_tinymce, INST, largeScreenWidth, dom_id)
     schema = config.defaultConfig()
-    equal(schema.skin, 'light')
+    equal(schema.skin, false)
 
   test "default config includes toolbar", ->
     INST.maxVisibleEditorButtons = 2
@@ -85,11 +85,6 @@ define [
     schema = config.defaultConfig()
     equal(schema.selector, "#some_textarea")
 
-  test "it loads up the right skin_url from an absolute path", ->
-    config = new EditorConfig(fake_tinymce, INST, largeScreenWidth, dom_id)
-    schema = config.defaultConfig()
-    equal(schema.skin_url, "/vendor/tinymce_themes/light")
-
   test "browser spellcheck enabled by default", ->
     config = new EditorConfig(fake_tinymce, INST, largeScreenWidth, dom_id)
     schema = config.defaultConfig()
@@ -97,15 +92,15 @@ define [
 
   QUnit.module "Tinymce Config Integration",
     setup: ->
-      $("body").append("<textarea id=42></textarea>")
+      $("body").append("<textarea id=a42></textarea>")
 
     teardown: ->
-      $("textarea#42").remove()
+      $("textarea#a42").remove()
 
   asyncTest "configured not to strip spans", ->
     expect(1)
-    $textarea = $("textarea#42")
+    $textarea = $("textarea#a42")
-    config = new EditorConfig(tinymce, INST, 1000, "42")
+    config = new EditorConfig(tinymce, INST, 1000, "a42")
     configHash = $.extend(config.defaultConfig(),{
       plugins: "",
       external_plugins: {},

spec/coffeescripts/TinymceEditorBoxListSpec.coffee

@@ -19,11 +19,11 @@ define ['tinymce.editor_box_list', 'jquery'], (EditorBoxList, $)->
   list = null
   QUnit.module "EditorBoxList",
     setup: ->
-      $("#fixtures").append("<textarea id=42></textarea>")
+      $("#fixtures").append("<textarea id=a42></textarea>")
       list = new EditorBoxList()
 
     teardown: ->
-      $("#42").remove()
+      $("#a42").remove()
       $("#fixtures").empty()
       $(".ui-dialog").remove()
       $(".mce-tinymce").remove()
@@ -35,17 +35,17 @@ define ['tinymce.editor_box_list', 'jquery'], (EditorBoxList, $)->
 
   test 'adding an editor box to the list', ->
     box = {}
-    node = $("#42")
+    node = $("#a42")
-    list._addEditorBox('42', box)
+    list._addEditorBox('a42', box)
-    equal(list._editor_boxes['42'], box)
+    equal(list._editor_boxes['a42'], box)
-    equal(list._textareas['42'].id, node.id)
+    equal(list._textareas['a42'].id, node.id)
 
   test "removing an editorbox from storage", ->
-    list._addEditorBox('42', {})
+    list._addEditorBox('a42', {})
-    list._removeEditorBox('42')
+    list._removeEditorBox('a42')
-    ok(!list._editor_boxes['42']?)
+    ok(!list._editor_boxes['a42']?)
-    ok(!list._textareas['42']?)
+    ok(!list._textareas['a42']?)
 
   test "retrieving a text area", ->
-    node = $("#42")
+    node = $("#a42")
-    ok(list._getTextArea('42').id == node.id)
+    ok(list._getTextArea('a42').id == node.id)

spec/coffeescripts/editor/EditorAccessibilitySpec.coffee

@@ -28,9 +28,9 @@ define [
 
   QUnit.module "EditorAccessibility",
     setup: ->
-      textarea = $("<textarea id='42' data-rich_text='true'></textarea>")
+      textarea = $("<textarea id='a42' data-rich_text='true'></textarea>")
       fixtures.append(textarea)
-      tinymce.init({selector: "#fixtures textarea#42"})
+      tinymce.init({selector: "#fixtures textarea#a42"})
       acc = new EditorAccessibility(tinymce.activeEditor)
       activeEditorNodes = tinymce.activeEditor.getContainer().children
     teardown: ->

spec/coffeescripts/views/ValidatedMixinSpec.coffee

@@ -24,7 +24,7 @@ define [
   textarea = null
   QUnit.module "ValidatedMixin",
     setup: ->
-      textarea = $("<textarea id='42' name='message' data-rich_text='true'></textarea>")
+      textarea = $("<textarea id='a42' name='message' data-rich_text='true'></textarea>")
       $('#fixtures').append textarea
       ValidatedMixin.$ = $
 
@@ -33,6 +33,6 @@ define [
       $("#fixtures").empty()
 
   test 'it can find tinymce instances as fields', ->
-    tinymce.init({selector: "#fixtures textarea#42"})
+    tinymce.init({selector: "#fixtures textarea#a42"})
     element = ValidatedMixin.findField('message')
     equal(element.length, 1)

spec/selenium/wiki_and_tiny_teacher_wysiwyg_spec.rb

@@ -165,14 +165,14 @@ describe "Wiki pages and Tiny WYSIWYG editor features" do
       wysiwyg_state_setup
 
       # I'm so, so sorry...
-      driver.find_element(:xpath, "//button/span[text()[contains(.,'Font Sizes')]]").click
+      driver.find_element(:xpath, "//button/span[text()[contains(.,'11pt')]]").click
       driver.find_element(:xpath, "//span[text()[contains(.,'36pt')]]").click
       validate_wiki_style_attrib("font-size", "36pt", "p span")
     end
 
     it "should change and remove all custom formatting on selected text", priority: "1", test_id: 298748 do
       wysiwyg_state_setup
-      driver.find_element(:xpath, "//button/span[text()[contains(.,'Font Sizes')]]").click
+      driver.find_element(:xpath, "//button/span[text()[contains(.,'11pt')]]").click
       driver.find_element(:xpath, "//span[text()[contains(.,'36pt')]]").click
       validate_wiki_style_attrib("font-size", "36pt", "p span")
       f(".mce-i-removeformat").click
@@ -390,7 +390,7 @@ describe "Wiki pages and Tiny WYSIWYG editor features" do
       driver.find_element(:xpath, "//button/span[text()[contains(.,'Paragraph')]]").click
       driver.find_element(:xpath, "//span[text()[contains(.,'Preformatted')]]").click
       in_frame wiki_page_body_ifr_id do
-        expect(ff('#tinymce pre').length).to eq 3
+        expect(ff('#tinymce pre').length).to eq 1
       end
     end
 
@@ -407,7 +407,7 @@ describe "Wiki pages and Tiny WYSIWYG editor features" do
     it "should create a table", priority: "1", test_id: 307627 do
       wysiwyg_state_setup
       f('.mce-i-table').click
-      driver.find_element(:xpath, "//span[text()[contains(.,'Insert table')]]").click
+      driver.find_element(:xpath, "//div/span[text()[contains(.,'Table')]]").click
       driver.find_element(:xpath, "//td/a[@data-mce-x='3' and @data-mce-y='3']").click
       in_frame wiki_page_body_ifr_id do
         expect(ff('#tinymce tr').length).to eq 4
@@ -415,10 +415,10 @@ describe "Wiki pages and Tiny WYSIWYG editor features" do
       end
     end
 
-    it "should edit a table", priority: "1", test_id: 588944 do
+    it "should edit a table from toolbar", priority: "1", test_id: 588944 do
       wysiwyg_state_setup
       f('.mce-i-table').click
-      driver.find_element(:xpath, "//span[text()[contains(.,'Insert table')]]").click
+      driver.find_element(:xpath, "//div/span[text()[contains(.,'Table')]]").click
       driver.find_element(:xpath, "//td/a[@data-mce-x='3' and @data-mce-y='3']").click
 
       f('.mce-i-table').click
@@ -428,7 +428,7 @@ describe "Wiki pages and Tiny WYSIWYG editor features" do
       f('.mce-i-table').click
       driver.find_element(:xpath, "//span[text()[contains(.,'Table properties')]]").click
       driver.find_element(:xpath, "//div[text()[contains(.,'Advanced')]]").click
-      ff('.mce-placeholder')[1].send_keys("green")
+      ff('div>input[placeholder]')[1].send_keys("green")
       f('.mce-primary').click
       in_frame wiki_page_body_ifr_id do
         expect(ff('#tinymce tr').length).to eq 5
@@ -437,7 +437,32 @@ describe "Wiki pages and Tiny WYSIWYG editor features" do
       validate_wiki_style_attrib("background-color", "green", "table")
     end
 
-    it "should delete a table", priority: "1", test_id: 588945 do
+    it "should edit a table from context menu", priority: "1", test_id: 307628 do
+      wysiwyg_state_setup
+      f('.mce-i-table').click
+      driver.find_element(:xpath, "//div/span[text()[contains(.,'Table')]]").click
+      driver.find_element(:xpath, "//td/a[@data-mce-x='3' and @data-mce-y='3']").click
+
+      f('.mce-i-table').click
+      driver.find_element(:xpath, "//span[text()[contains(.,'Row')]]").click
+      driver.find_element(:xpath, "//span[text()[contains(.,'Insert row after')]]").click
+
+      driver.find_element(:xpath, "(//i[contains(@class,'mce-i-table') and "\
+                                  "not(contains(@class,'mce-i-tabledelete')) "\
+                                  "and not(contains(@class,'mce-i-tableinsert'))])[3]").click
+      driver.find_element(:xpath, "//div[text()[contains(.,'Advanced')]]").click
+
+      ff('div>input[placeholder]')[1].send_keys("green")
+      f('.mce-primary').click
+      in_frame wiki_page_body_ifr_id do
+        expect(ff('#tinymce tr').length).to eq 5
+        expect(ff('#tinymce td').length).to eq 20
+      end
+      validate_wiki_style_attrib("background-color", "green", "table")
+    end
+
+
+    it "should delete a table from toolbar", priority: "1", test_id: 588945 do
       table = "<table><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table>"
       wysiwyg_state_setup(table, html: true)
       f('.mce-i-table').click
@@ -447,6 +472,19 @@ describe "Wiki pages and Tiny WYSIWYG editor features" do
       end
     end
 
+    it "should delete a table from context menu", priority: "1", test_id: 588945 do
+      wysiwyg_state_setup
+
+      f('.mce-i-table').click
+      driver.find_element(:xpath, "//div/span[text()[contains(.,'Table')]]").click
+      driver.find_element(:xpath, "//td/a[@data-mce-x='3' and @data-mce-y='3']").click
+
+      f('.mce-i-tabledelete').click
+      in_frame wiki_page_body_ifr_id do
+        expect(f("#tinymce")).not_to contain_css('table')
+      end
+    end
+
     it "should add bold text to the rce", priority: "1", test_id: 285128 do
       wysiwyg_state_setup
       f('.mce-i-bold').click

yarn.lock

@@ -7152,11 +7152,7 @@ tinymce-light-skin@1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/tinymce-light-skin/-/tinymce-light-skin-1.2.2.tgz#e6a63050b5ee391b1970e66feb93be91ca539330"
 
-tinymce@4.1.9:
+tinymce@4.5.7, tinymce@~4.5.3:
-  version "4.1.9"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-4.1.9.tgz#7f45780fc9dd8bf47e798d6df02c383f2a713013"
-
-tinymce@~4.5.3:
   version "4.5.7"
   resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-4.5.7.tgz#e1f5cd286ec3c9977bd672a4c14e496f63bc4fef"