From 5ff873c6daeb0558fe7292ab8f60fe1e4826a57a Mon Sep 17 00:00:00 2001 From: brian kirkby Date: Tue, 9 May 2017 16:34:40 -0600 Subject: [PATCH] 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 Product-Review: brian kirkby QA-Review: Tucker McKnight --- app/jsx/shared/rce/editorOptions.js | 4 ++ package.json | 3 +- public/javascripts/tinymce.config.js | 3 +- spec/coffeescripts/TinymceCommandsSpec.coffee | 20 +++---- spec/coffeescripts/TinymceConfigSpec.coffee | 15 ++---- .../TinymceEditorBoxListSpec.coffee | 24 ++++----- .../editor/EditorAccessibilitySpec.coffee | 4 +- .../views/ValidatedMixinSpec.coffee | 4 +- .../wiki_and_tiny_teacher_wysiwyg_spec.rb | 54 ++++++++++++++++--- yarn.lock | 6 +-- 10 files changed, 85 insertions(+), 52 deletions(-) diff --git a/app/jsx/shared/rce/editorOptions.js b/app/jsx/shared/rce/editorOptions.js index 9371827998d..44f04df6ab9 100644 --- a/app/jsx/shared/rce/editorOptions.js +++ b/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 || {}) ); diff --git a/package.json b/package.json index bdf03c288a2..1af3c01170f 100644 --- a/package.json +++ b/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", diff --git a/public/javascripts/tinymce.config.js b/public/javascripts/tinymce.config.js index d3d39c69abd..6602e66a750 100644 --- a/public/javascripts/tinymce.config.js +++ b/public/javascripts/tinymce.config.js @@ -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", diff --git a/spec/coffeescripts/TinymceCommandsSpec.coffee b/spec/coffeescripts/TinymceCommandsSpec.coffee index 303be71924d..359e7599a47 100644 --- a/spec/coffeescripts/TinymceCommandsSpec.coffee +++ b/spec/coffeescripts/TinymceCommandsSpec.coffee @@ -30,7 +30,7 @@ define [ setup: -> testbed = $("
") $("#fixtures").append(testbed) - textarea = $("") + 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 = $("") 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" diff --git a/spec/coffeescripts/TinymceConfigSpec.coffee b/spec/coffeescripts/TinymceConfigSpec.coffee index 398a052fa04..874c260674c 100644 --- a/spec/coffeescripts/TinymceConfigSpec.coffee +++ b/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("") + $("body").append("") 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: {}, diff --git a/spec/coffeescripts/TinymceEditorBoxListSpec.coffee b/spec/coffeescripts/TinymceEditorBoxListSpec.coffee index 84e9597f3a5..81e62e52cee 100644 --- a/spec/coffeescripts/TinymceEditorBoxListSpec.coffee +++ b/spec/coffeescripts/TinymceEditorBoxListSpec.coffee @@ -19,11 +19,11 @@ define ['tinymce.editor_box_list', 'jquery'], (EditorBoxList, $)-> list = null QUnit.module "EditorBoxList", setup: -> - $("#fixtures").append("") + $("#fixtures").append("") 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) diff --git a/spec/coffeescripts/editor/EditorAccessibilitySpec.coffee b/spec/coffeescripts/editor/EditorAccessibilitySpec.coffee index 083c476ca9b..dd2cad99c3c 100644 --- a/spec/coffeescripts/editor/EditorAccessibilitySpec.coffee +++ b/spec/coffeescripts/editor/EditorAccessibilitySpec.coffee @@ -28,9 +28,9 @@ define [ QUnit.module "EditorAccessibility", setup: -> - textarea = $("") + 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: -> diff --git a/spec/coffeescripts/views/ValidatedMixinSpec.coffee b/spec/coffeescripts/views/ValidatedMixinSpec.coffee index f865c12bc06..ffe666085e0 100644 --- a/spec/coffeescripts/views/ValidatedMixinSpec.coffee +++ b/spec/coffeescripts/views/ValidatedMixinSpec.coffee @@ -24,7 +24,7 @@ define [ textarea = null QUnit.module "ValidatedMixin", setup: -> - textarea = $("") + 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) diff --git a/spec/selenium/wiki_and_tiny_teacher_wysiwyg_spec.rb b/spec/selenium/wiki_and_tiny_teacher_wysiwyg_spec.rb index 9e036fa87ec..cb8c55a0a0c 100644 --- a/spec/selenium/wiki_and_tiny_teacher_wysiwyg_spec.rb +++ b/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 = "
" 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 diff --git a/yarn.lock b/yarn.lock index 74a2d790a78..02566395db0 100644 --- a/yarn.lock +++ b/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: - 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"