ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
brian kirkby 2017-05-09 16:34:40 -06:00
parent 9f47ed9a91
commit 5ff873c6da
10 changed files with 85 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/jsx/shared/rce/editorOptions.js
View File

@ -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 || {})
);

3
package.json
View File

@ -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",

3
public/javascripts/tinymce.config.js
View File

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

20
spec/coffeescripts/TinymceCommandsSpec.coffee
View File

@ -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"})
equal(tinymce.activeEditor.id, '43')
tinymce.init({selector: "#command-testbed textarea#a43"})
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)
equal(box, list._editor_boxes['43'])
list._addEditorBox('a43', box)
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"})
editor = tinymce.get(43)
tinymce.init({selector: "#command-testbed textarea#a43"})
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"

15
spec/coffeescripts/TinymceConfigSpec.coffee
View File

@ -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")
config = new EditorConfig(tinymce, INST, 1000, "42")
$textarea = $("textarea#a42")
config = new EditorConfig(tinymce, INST, 1000, "a42")
configHash = $.extend(config.defaultConfig(),{
plugins: "",
external_plugins: {},

24
spec/coffeescripts/TinymceEditorBoxListSpec.coffee
View File

@ -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")
list._addEditorBox('42', box)
equal(list._editor_boxes['42'], box)
equal(list._textareas['42'].id, node.id)
node = $("#a42")
list._addEditorBox('a42', box)
equal(list._editor_boxes['a42'], box)
equal(list._textareas['a42'].id, node.id)
test "removing an editorbox from storage", ->
list._addEditorBox('42', {})
list._removeEditorBox('42')
ok(!list._editor_boxes['42']?)
ok(!list._textareas['42']?)
list._addEditorBox('a42', {})
list._removeEditorBox('a42')
ok(!list._editor_boxes['a42']?)
ok(!list._textareas['a42']?)
test "retrieving a text area", ->
node = $("#42")
ok(list._getTextArea('42').id == node.id)
node = $("#a42")
ok(list._getTextArea('a42').id == node.id)

4
spec/coffeescripts/editor/EditorAccessibilitySpec.coffee
View File

@ -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: ->

4
spec/coffeescripts/views/ValidatedMixinSpec.coffee
View File

@ -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)

54
spec/selenium/wiki_and_tiny_teacher_wysiwyg_spec.rb
View File

@ -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

6
yarn.lock
View File

@ -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:
version "4.1.9"
resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-4.1.9.tgz#7f45780fc9dd8bf47e798d6df02c383f2a713013"
tinymce@~4.5.3:
tinymce@4.5.7, tinymce@~4.5.3:
version "4.5.7"
resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-4.5.7.tgz#e1f5cd286ec3c9977bd672a4c14e496f63bc4fef"