feat: open the editor when creating a new component

src/library-authoring/add-content/AddContentContainer.tsx

@@ -16,16 +16,19 @@ import {
   ContentPaste,
 } from '@openedx/paragon/icons';
 import { v4 as uuid4 } from 'uuid';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
+
 import { ToastContext } from '../../generic/toast-context';
 import { useCopyToClipboard } from '../../generic/clipboard';
 import { getCanEdit } from '../../course-unit/data/selectors';
 import { useCreateLibraryBlock, useLibraryPasteClipboard } from '../data/apiHooks';
+import { getEditUrl } from '../components/utils';
 
 import messages from './messages';
 
 const AddContentContainer = () => {
   const intl = useIntl();
+  const navigate = useNavigate();
   const { libraryId } = useParams();
   const createBlockMutation = useCreateLibraryBlock();
   const pasteClipboardMutation = useLibraryPasteClipboard();
@@ -100,8 +103,14 @@ const AddContentContainer = () => {
           libraryId,
           blockType,
           definitionId: `${uuid4()}`,
-        }).then(() => {
-          showToast(intl.formatMessage(messages.successCreateMessage));
+        }).then((data) => {
+          const editUrl = getEditUrl(data.id);
+          if (editUrl) {
+            navigate(editUrl);
+          } else {
+            // We can't start editing this right away so just show a toast message:
+            showToast(intl.formatMessage(messages.successCreateMessage));
+          }
         }).catch(() => {
           showToast(intl.formatMessage(messages.errorCreateMessage));
         });

src/library-authoring/data/api.ts

@@ -166,7 +166,7 @@ export async function createLibraryBlock({
       definition_id: definitionId,
     },
   );
-  return data;
+  return camelCaseObject(data);
 }
 
 /**