feat: In libraries, allow opening the editor for text (html) components

src/CourseAuthoringRoutes.jsx

@@ -88,7 +88,7 @@ const CourseAuthoringRoutes = () => {
         />
         <Route
           path="editor/:blockType/:blockId?"
-          element={<PageWrap><EditorContainer courseId={courseId} /></PageWrap>}
+          element={<PageWrap><EditorContainer learningContextId={courseId} /></PageWrap>}
         />
         <Route
           path="settings/details"

src/editors/EditorContainer.test.jsx

@@ -10,7 +10,7 @@ jest.mock('react-router', () => ({
   }),
 }));
 
-const props = { courseId: 'cOuRsEId' };
+const props = { learningContextId: 'cOuRsEId' };
 
 describe('Editor Container', () => {
   describe('snapshots', () => {

src/editors/EditorContainer.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform';
+
+import EditorPage from './EditorPage';
+
+interface Props {
+  /** Course ID or Library ID */
+  learningContextId: string;
+  /** Event handler for when user cancels out of the editor page */
+  onClose?: () => void;
+  /** Event handler for when user saves changes using an editor */
+  onSave?: () => (newData: Record<string, any>) => void;
+}
+
+const EditorContainer: React.FC<Props> = ({
+  learningContextId,
+  onClose,
+  onSave,
+}) => {
+  const { blockType, blockId } = useParams();
+  if (blockType === undefined || blockId === undefined) {
+    // This shouldn't be possible; it's just here to satisfy the type checker.
+    return <div>Error: missing URL parameters</div>;
+  }
+  return (
+    <div className="editor-page">
+      <EditorPage
+        courseId={learningContextId}
+        blockType={blockType}
+        blockId={blockId}
+        studioEndpointUrl={getConfig().STUDIO_BASE_URL}
+        lmsEndpointUrl={getConfig().LMS_BASE_URL}
+        onClose={onClose}
+        returnFunction={onSave}
+      />
+    </div>
+  );
+};
+
+export default EditorContainer;

src/library-authoring/LibraryLayout.tsx

@@ -1,11 +1,54 @@
 import React from 'react';
+import {
+  Route,
+  Routes,
+  useNavigate,
+  useParams,
+} from 'react-router-dom';
+import { PageWrap } from '@edx/frontend-platform/react';
+
+import EditorContainer from '../editors/EditorContainer';
 import LibraryAuthoringPage from './LibraryAuthoringPage';
 import { LibraryProvider } from './common/context';
 
-const LibraryLayout = () => (
-  <LibraryProvider>
-    <LibraryAuthoringPage />
-  </LibraryProvider>
-);
+const LibraryLayout = () => {
+  const { libraryId } = useParams();
+
+  if (libraryId === undefined) {
+    throw new Error('Error: route is missing libraryId.'); // Should never happen
+  }
+
+  const navigate = useNavigate();
+  const goBack = React.useCallback(() => {
+    if (window.history.length > 1) {
+      navigate(-1); // go back
+    } else {
+      navigate(`/library/${libraryId}`);
+    }
+    // The following function is called only if changes are saved:
+    return ({ id }) => {
+      // TODO:: invalidate any queries that involve ID.
+    };
+  }, []);
+
+  return (
+    <LibraryProvider>
+      <Routes>
+        <Route
+          path="editor/:blockType/:blockId?"
+          element={(
+            <PageWrap>
+              <EditorContainer learningContextId={libraryId} onClose={goBack} onSave={goBack} />
+            </PageWrap>
+          )}
+        />
+        <Route
+          path="*"
+          element={<LibraryAuthoringPage />}
+        />
+      </Routes>
+    </LibraryProvider>
+  );
+};
 
 export default LibraryLayout;

src/library-authoring/components/ComponentCard.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, useState } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Card,
@@ -10,6 +10,7 @@ import {
   Stack,
 } from '@openedx/paragon';
 import { MoreVert } from '@openedx/paragon/icons';
+import { Link, useParams } from 'react-router-dom';
 
 import { getItemIcon, getComponentStyleColor } from '../../generic/block-type-utils';
 import { updateClipboard } from '../../generic/data/api';
@@ -27,6 +28,9 @@ type ComponentCardProps = {
 
 export const ComponentMenu = ({ usageKey }: { usageKey: string }) => {
   const intl = useIntl();
+  // Get the block type (e.g. "html") from a lib block usage key string like "lb:org:lib:block_type:id"
+  const blockType: string = usageKey.split(':')[3] ?? 'unknown';
+  const { libraryId } = useParams();
   const { showToast } = useContext(ToastContext);
   const [clipboardBroadcastChannel] = useState(() => new BroadcastChannel(STUDIO_CLIPBOARD_CHANNEL));
   const updateClipboardClick = () => {
@@ -50,14 +54,22 @@ export const ComponentMenu = ({ usageKey }: { usageKey: string }) => {
         data-testid="component-card-menu-toggle"
       />
       <Dropdown.Menu>
-        <Dropdown.Item disabled>
-          {intl.formatMessage(messages.menuEdit)}
-        </Dropdown.Item>
+        {
+          blockType === 'html' ? (
+            <Dropdown.Item as={Link} to={`/library/${libraryId}/editor/${blockType}/${usageKey}`}>
+              <FormattedMessage {...messages.menuEdit} />
+            </Dropdown.Item>
+          ) : (
+            <Dropdown.Item disabled>
+              <FormattedMessage {...messages.menuEdit} />
+            </Dropdown.Item>
+          )
+        }
         <Dropdown.Item onClick={updateClipboardClick}>
-          {intl.formatMessage(messages.menuCopyToClipboard)}
+          <FormattedMessage {...messages.menuCopyToClipboard} />
         </Dropdown.Item>
         <Dropdown.Item disabled>
-          {intl.formatMessage(messages.menuAddToCollection)}
+          <FormattedMessage {...messages.menuAddToCollection} />
         </Dropdown.Item>
       </Dropdown.Menu>
     </Dropdown>