feat: wip pdf authoring

Author: Kelketek

src/course-unit/add-component/AddComponent.tsx

@@ -170,7 +170,25 @@ const AddComponent = ({
         showAddLibraryContentModal();
         break;
       case COMPONENT_TYPES.advanced:
-        handleCreateNewCourseXBlock({ type: moduleName, category: moduleName, parentLocator: blockId });
+        // TODO: The 'advanced components' concept warrants examination.
+        // 'Advanced' is a bucket where we chuck all the blocks that are
+        // uncommon, or third-party installs. Until now, none of these have
+        // had special editors in this MFE. This is the first.
+        // The fact that advanced modules are handled as a special category
+        // *in code* and not just in UI seems like a mistake in retrospect.
+        //
+        // There will be more of these, and soon.
+        switch (moduleName) {
+          case COMPONENT_TYPES.pdf:
+            handleCreateNewCourseXBlock({ type: moduleName, parentLocator: blockId }, ({ courseKey, locator }) => {
+              setCourseId(courseKey);
+              setBlockType(moduleName);
+              setNewBlockId(locator);
+              showXBlockEditorModal();
+            });
+            break;
+          default: handleCreateNewCourseXBlock({ type: moduleName, category: moduleName, parentLocator: blockId });
+        }
         break;
       case COMPONENT_TYPES.openassessment:
         handleCreateNewCourseXBlock({ boilerplate: moduleName, category: type, parentLocator: blockId });

src/editors/Editor.tsx

@@ -40,6 +40,7 @@ const Editor: React.FC<Props> = ({
   });
 
   const EditorComponent = supportedEditors[blockType];
+  console.log("Component is", EditorComponent)
 
   // Do not load editor until everything is initialized.
   if (loading) {

src/editors/containers/PdfEditor/index.tsx

@@ -0,0 +1,47 @@
+import React, {useRef} from 'react';
+import { EditorComponent } from '@src/editors/EditorComponent';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useDispatch, useSelector } from 'react-redux';
+import { EditorState, selectors } from '@src/editors/data/redux';
+import { RequestKeys } from '@src/editors/data/constants/requests';
+import {Spinner} from "@openedx/paragon";
+import EditorContainer from "@src/editors/containers/EditorContainer";
+import { ProblemEditorContextProvider } from "../ProblemEditor/components/EditProblemView/ProblemEditorContext";
+
+export interface Props extends EditorComponent {}
+
+/**
+ * Renders the form with all fields to embed a PDF.
+ */
+const PdfEditor: React.FC<Props> = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const blockFinished = useSelector((state: EditorState) => selectors.app.shouldCreateBlock(state)
+    || selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }));
+
+  const blockFailed = useSelector(
+    (state: EditorState) => selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchBlock }),
+  );
+  // TODO: Is this necessary?
+  const editorRef = useRef(null);
+  if (!blockFinished) {
+    return (
+      <div className="text-center p-6">
+        <Spinner
+          animation="border"
+          className="m-3"
+          screenReaderText="Loading Problem Editor"
+        />
+      </div>
+    );
+  }
+  return (
+    <ProblemEditorContextProvider editorRef={editorRef}>
+      <EditorContainer {...props} isDirty={() => true} getContent={() => console.log("Content get!")}>
+        <h1>I am the PDF Editor</h1>
+      </EditorContainer>
+    </ProblemEditorContextProvider>
+  )
+};
+
+export default PdfEditor;

src/editors/data/constants/app.ts

@@ -7,4 +7,5 @@ export const blockTypes = StrictDict({
   // ADDED_EDITORS GO BELOW
   video_upload: 'video_upload',
   game: 'game',
+  pdf: 'pdf',
 });

src/editors/data/redux/index.ts

@@ -8,6 +8,7 @@ import * as requests from './requests';
 import * as video from './video';
 import * as problem from './problem';
 import * as game from './game';
+import * as pdf from './pdf';
 import type { RequestKeys, RequestStates } from '../constants/requests';
 import { AdvancedProblemType, type GradingMethodKey, ProblemType } from '../constants/problem';
 
@@ -35,6 +36,7 @@ const actions = StrictDict({
   video: video.actions,
   problem: problem.actions,
   game: game.actions,
+  pdf: pdf.selectors,
 });
 
 const selectors = StrictDict({
@@ -43,6 +45,7 @@ const selectors = StrictDict({
   video: video.selectors,
   problem: problem.selectors,
   game: game.selectors,
+  pdf: pdf.selectors,
 });
 
 export interface EditorState {
@@ -192,6 +195,7 @@ export interface EditorState {
       }
     }
   },
+  pdf: pdf.PdfState,
   game: {
     settings: Record<string, any>;
     exampleValue: 'this is an example value from the redux state';

src/editors/data/redux/pdf/index.ts

@@ -0,0 +1,3 @@
+export { actions, reducer } from './reducers';
+export { default as selectors } from './selectors';
+export type { PdfState } from './types';

src/editors/data/redux/pdf/reducers.ts

@@ -0,0 +1,18 @@
+import { PdfState } from '@src/editors/data/redux/pdf/types';
+import { createSlice } from '@reduxjs/toolkit';
+
+export const initialPdfState: () => PdfState = () => ({
+  displayName: 'pdf',
+  url: '',
+  allowDownload: true,
+  source_text: '',
+  source_url: '',
+});
+
+const pdf = createSlice({
+  name: 'pdf',
+  initialState: initialPdfState(),
+  reducers: {},
+});
+
+export const { reducer, actions } = pdf;

src/editors/data/redux/pdf/selectors.test.ts

@@ -0,0 +1,10 @@
+import { pdfState } from '@src/editors/data/redux/pdf/selectors';
+import { initialPdfState } from '@src/editors/data/redux/pdf/reducers';
+import { EditorState } from '@src/editors/data/redux';
+
+describe('PDF Selectors', () => {
+  it('Selects the PDF State', () => {
+    const state = initialPdfState();
+    expect(pdfState({ otherValue: 'wat', pdf: state } as unknown as EditorState)).toEqual(state);
+  });
+});

src/editors/data/redux/pdf/selectors.ts

@@ -0,0 +1,17 @@
+import { createSelector } from 'reselect';
+import type { EditorState } from '..';
+import { PdfState } from './types';
+
+export const pdfState: (state: EditorState) => PdfState = (state: EditorState) => state.pdf;
+
+const mkSimpleSelector = <T>(cb: (pdfState: EditorState['pdf']) => T) => createSelector([pdfState], cb);
+
+const simpleSelectors: { [Property in keyof PdfState]: (state: EditorState) => PdfState[Property] } = {
+  displayName: mkSimpleSelector(pdfState => pdfState.displayName),
+  url: mkSimpleSelector(pdfState => pdfState.url),
+  allowDownload: mkSimpleSelector(pdfState => pdfState.allowDownload),
+  source_text: mkSimpleSelector(pdfState => pdfState.source_text),
+  source_url: mkSimpleSelector(pdfState => pdfState.source_url),
+};
+
+export default simpleSelectors;

src/editors/data/redux/pdf/types.d.ts

@@ -0,0 +1,7 @@
+export interface PdfState {
+  displayName: string,
+  url: string,
+  allowDownload: boolean,
+  source_text: string,
+  source_url: string,
+}