Feat updates to code block button (#93)

* feat: updates to code block button

* feat: updates to code block button

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: '*[*]',
   },
 });
 

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();
       });

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',