diff --git a/src/editors/containers/TextEditor/hooks.js b/src/editors/containers/TextEditor/hooks.js index 29dacf2df..f5a7e69cb 100644 --- a/src/editors/containers/TextEditor/hooks.js +++ b/src/editors/containers/TextEditor/hooks.js @@ -37,17 +37,22 @@ export const setupCustomBehavior = ({ openModal, setImage }) => (editor) => { onAction: openCodeEditor, }); // add a custom simple inline code block formatter. - const toggleCodeFormatting = () => editor.formatter.toggle('code'); - editor.ui.registry.addButton(tinyMCE.buttons.codeBlock, { + const setupCodeFormatting = (api) => { + editor.formatter.formatChanged( + 'code', + (active) => api.setActive(active), + ); + }; + const toggleCodeFormatting = () => { + editor.formatter.toggle('code'); + editor.undoManager.add(); + editor.focus(); + }; + editor.ui.registry.addToggleButton(tinyMCE.buttons.codeBlock, { icon: 'sourcecode', tooltip: 'Code Block', onAction: toggleCodeFormatting, - }); - const toggleBlockQuoteFormatting = () => editor.formatter.toggle('blockquote'); - editor.ui.registry.addButton(tinyMCE.buttons.blockQuote, { - icon: 'quote', - tooltip: 'Block Quote', - onAction: toggleBlockQuoteFormatting, + onSetup: setupCodeFormatting, }); }; @@ -55,12 +60,12 @@ export const setupCustomBehavior = ({ openModal, setImage }) => (editor) => { export const removeProtocolFromUrl = (url) => url.replace(/^https?:\/\//, ''); export const editorConfig = ({ - setEditorRef, blockValue, - openModal, initializeEditor, - setSelection, lmsEndpointUrl, + openModal, + setEditorRef, + setSelection, studioEndpointUrl, }) => ({ onInit: (evt, editor) => { @@ -69,16 +74,15 @@ export const editorConfig = ({ }, initialValue: blockValue ? blockValue.data.data : '', init: { - - setup: module.setupCustomBehavior({ openModal, setImage: setSelection }), - plugins: pluginConfig.plugins, - imagetools_toolbar: pluginConfig.imageToolbar, - toolbar: pluginConfig.toolbar, - contextmenu: 'link table', ...pluginConfig.config, - valid_elements: '*[*]', - valid_children: '+body[style]', + contextmenu: 'link table', imagetools_cors_hosts: [removeProtocolFromUrl(lmsEndpointUrl), removeProtocolFromUrl(studioEndpointUrl)], + imagetools_toolbar: pluginConfig.imageToolbar, + plugins: pluginConfig.plugins, + setup: module.setupCustomBehavior({ openModal, setImage: setSelection }), + toolbar: pluginConfig.toolbar, + valid_children: '+body[style]', + valid_elements: '*[*]', }, }); diff --git a/src/editors/containers/TextEditor/hooks.test.jsx b/src/editors/containers/TextEditor/hooks.test.jsx index 2983b32a9..d4d714f7f 100644 --- a/src/editors/containers/TextEditor/hooks.test.jsx +++ b/src/editors/containers/TextEditor/hooks.test.jsx @@ -55,18 +55,19 @@ describe('TextEditor hooks', () => { afterEach(() => { state.restore(); }); describe('setupCustomBehavior', () => { - test('It calls addButton in the editor, but openModal is not called', () => { + test('It calls addButton and addToggleButton in the editor, but openModal is not called', () => { const addButton = jest.fn(); + const addToggleButton = jest.fn(); const openModal = jest.fn(); const setImage = jest.fn(); const editor = { - ui: { registry: { addButton } }, + ui: { registry: { addButton, addToggleButton } }, }; const mockOpenModalWithImage = args => ({ openModalWithSelectedImage: args }); const expectedSettingsAction = mockOpenModalWithImage({ editor, setImage, openModal }); const openCodeEditor = expect.any(Function); const toggleCodeFormatting = expect.any(Function); - const toggleBlockQuoteFormatting = expect.any(Function); + const setupCodeFormatting = expect.any(Function); jest.spyOn(module, moduleKeys.openModalWithSelectedImage) .mockImplementationOnce(mockOpenModalWithImage); output = module.setupCustomBehavior({ openModal, setImage })(editor); @@ -74,8 +75,11 @@ describe('TextEditor hooks', () => { [tinyMCE.buttons.imageUploadButton, { icon: 'image', tooltip: 'Add Image', onAction: openModal }], [tinyMCE.buttons.editImageSettings, { icon: 'image', tooltip: 'Edit Image Settings', onAction: expectedSettingsAction }], [tinyMCE.buttons.code, { text: 'HTML', tooltip: 'Source code', onAction: openCodeEditor }], - [tinyMCE.buttons.codeBlock, { icon: 'sourcecode', tooltip: 'Code Block', onAction: toggleCodeFormatting }], - [tinyMCE.buttons.blockQuote, { icon: 'quote', tooltip: 'Block Quote', onAction: toggleBlockQuoteFormatting }], + ]); + expect(addToggleButton.mock.calls).toEqual([ + [tinyMCE.buttons.codeBlock, { + icon: 'sourcecode', tooltip: 'Code Block', onAction: toggleCodeFormatting, onSetup: setupCodeFormatting, + }], ]); expect(openModal).not.toHaveBeenCalled(); }); diff --git a/src/editors/data/constants/tinyMCE.js b/src/editors/data/constants/tinyMCE.js index 70732f092..f1c2fe2c9 100644 --- a/src/editors/data/constants/tinyMCE.js +++ b/src/editors/data/constants/tinyMCE.js @@ -10,7 +10,7 @@ export const commands = StrictDict({ export const buttons = StrictDict({ addImageButton: 'addimagebutton', - blockQuote: 'blockQuote', + blockQuote: 'blockquote', codeBlock: 'codeBlock', align: StrictDict({ center: 'aligncenter',