feat: pdf authoring

Author: Kelketek

package.json

@@ -20,6 +20,7 @@
     "start:with-theme": "paragon install-theme && npm start && npm install",
     "dev": "PUBLIC_PATH=/authoring/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "test:dev": "TZ=UTC fedx-scripts jest --coverage --watch --passWithNoTests",
     "test:ci": "TZ=UTC fedx-scripts jest --silent --coverage --passWithNoTests",
     "types": "tsc --noEmit"
   },

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

@@ -83,7 +83,7 @@ const AddComponent = ({
   const [selectedComponents, setSelectedComponents] = useState<SelectedComponent[]>([]);
   const [usageId, setUsageId] = useState(null);
   const { sendMessageToIframe } = useIframe();
-  const { useVideoGalleryFlow } = useWaffleFlags(courseId ?? undefined);
+  const { useVideoGalleryFlow, useNewPdfEditor } = useWaffleFlags(courseId ?? undefined);
 
   const courseUnit = useSelector(getCourseUnitData);
   const sequenceId = courseUnit?.ancestorInfo?.ancestors?.[0]?.id;
@@ -170,7 +170,24 @@ 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.
+        if (moduleName === COMPONENT_TYPES.pdf && useNewPdfEditor) {
+          handleCreateNewCourseXBlock({ type: moduleName, parentLocator: blockId }, ({ courseKey, locator }) => {
+            setCourseId(courseKey);
+            setBlockType(moduleName);
+            setNewBlockId(locator);
+            showXBlockEditorModal();
+          });
+        } else {
+          handleCreateNewCourseXBlock({ type: moduleName, category: moduleName, parentLocator: blockId });
+        }
         break;
       case COMPONENT_TYPES.openassessment:
         handleCreateNewCourseXBlock({ boilerplate: moduleName, category: type, parentLocator: blockId });

src/course-unit/xblock-container-iframe/index.tsx

@@ -1,6 +1,6 @@
 import { getConfig } from '@edx/frontend-platform';
 import {
-  FC, useEffect, useState, useMemo, useCallback,
+  FC, useEffect, useState, useMemo, useCallback, Fragment,
 } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useToggle, Sheet, StandardModal } from '@openedx/paragon';

src/data/api.ts

@@ -90,6 +90,7 @@ export const waffleFlagDefaults = {
   useNewCertificatesPage: true,
   useNewTextbooksPage: true,
   useNewGroupConfigurationsPage: true,
+  useNewPdfEditor: true,
   useReactMarkdownEditor: true,
   useVideoGalleryFlow: false,
   enableAuthzCourseAuthoring: false,

src/editors/api.ts

@@ -0,0 +1,23 @@
+/* Shared react-query hooks for editors. */
+import { useSelector } from 'react-redux';
+import { EditorState, selectors } from '@src/editors/data/redux';
+import { useEditorContext } from '@src/editors/EditorContext';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { useMutation } from '@tanstack/react-query';
+import * as urls from '@src/editors/data/services/cms/urls';
+
+export const useCourseAssetUpload = () => {
+  const studioEndpointUrl = useSelector((state: EditorState) => selectors.app.studioEndpointUrl(state))!;
+  const { learningContextId } = useEditorContext();
+  const client = getAuthenticatedHttpClient();
+  return useMutation({
+    mutationFn: (file: File) => {
+      const data = new FormData();
+      data.append('file', file);
+      return client.post(
+        urls.courseAssets({ studioEndpointUrl, learningContextId }),
+        data,
+      );
+    },
+  });
+};

src/editors/containers/PdfEditor/api.ts

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+import { useSelector } from 'react-redux';
+import { EditorState, selectors } from '@src/editors/data/redux';
+import { camelizeKeys } from '@src/editors/utils';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import type { AxiosResponse } from 'axios';
+import * as urls from '@src/editors/data/services/cms/urls';
+
+interface UseBlockDataParams {
+  blockId: string,
+  uniqueId: string,
+  handlerName: string,
+}
+
+// Unique ID required due to intractable race conditions. See ./contexts.tsx file.
+export const useBlockData = <T>({ blockId, uniqueId, handlerName }: UseBlockDataParams) => {
+  const studioEndpointUrl = useSelector((state: EditorState) => selectors.app.studioEndpointUrl(state))!;
+  const client = getAuthenticatedHttpClient();
+  return useQuery<T>({
+    queryKey: ['blockData', blockId, uniqueId],
+    staleTime: Infinity,
+    queryFn: ({ signal }) => client.get(
+      urls.xblockHandlerUrl({ blockId, studioEndpointUrl, handlerName }),
+      { cancelSource: signal },
+    ).then((res: AxiosResponse<unknown>) => camelizeKeys(res.data) as T),
+  });
+};

src/editors/containers/PdfEditor/components/PdfEditingModal.tsx

@@ -0,0 +1,71 @@
+import { EditorComponent } from '@src/editors/EditorComponent';
+import { useFormikContext } from 'formik';
+import React, {
+  PropsWithChildren, useContext, useEffect, useRef,
+} from 'react';
+import EditorContainer from '@src/editors/containers/EditorContainer';
+import { PdfBlockContext, PdfState } from '@src/editors/containers/PdfEditor/contexts';
+import { isEqual } from 'lodash';
+import DownloadOptions from '@src/editors/containers/PdfEditor/components/sections/DownloadOptions';
+import { UploadWidget, defaultUploadMessages } from '@src/editors/sharedComponents/UploadWidget';
+import { Spinner } from '@openedx/paragon';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { messages, fileUploadMessages } from './messages';
+
+const EditorWrapper: React.FC<PropsWithChildren> = ({ children }) => {
+  const intl = useIntl();
+  const { isPending, fetchError } = useContext(PdfBlockContext);
+  if (fetchError) {
+    return (
+      <div className="text-center p-6">
+        <FormattedMessage {...messages.blockFailed} />
+      </div>
+    );
+  }
+  if (isPending) {
+    return (
+      <div className="text-center p-6">
+        <Spinner
+          animation="border"
+          className="m-3"
+          screenReaderText={intl.formatMessage(messages.blockLoading)}
+        />
+      </div>
+    );
+  }
+  return <>{children}</>; /* eslint-disable-line react/jsx-no-useless-fragment */
+};
+
+const uploadMessages = { ...defaultUploadMessages, ...fileUploadMessages };
+
+const PdfEditingModal: React.FC<EditorComponent> = (props) => {
+  const { fields } = useContext(PdfBlockContext);
+  const originalState = useRef({ ...fields });
+  const { values, setValues } = useFormikContext<PdfState>();
+
+  useEffect(() => {
+    // Form is initialized before we get these values, so we have to set them
+    // when they arrive.
+    void setValues(fields); // eslint-disable-line no-void
+  }, [fields]);
+
+  const isDirty = () => isEqual(originalState, values);
+
+  const getContent = () => {
+    const settings = { ...values };
+    // disableAllDownload is not a setting we control, but a backend flag. Have to remove it or the
+    // backend will reject.
+    return Object.fromEntries(Object.entries(settings).filter(([key]) => key !== 'disableAllDownload'));
+  };
+
+  return (
+    <EditorContainer {...props} isDirty={isDirty} getContent={getContent}>
+      <EditorWrapper>
+        <UploadWidget supportedFileFormats="application/pdf" urlFieldName="url" messages={uploadMessages} />
+        <DownloadOptions />
+      </EditorWrapper>
+    </EditorContainer>
+  );
+};
+
+export default PdfEditingModal;

src/editors/containers/PdfEditor/components/PdfEditorContainer.tsx

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+import { PdfBlockContext } from '@src/editors/containers/PdfEditor/contexts';
+import { Formik } from 'formik';
+import { EditorComponent } from '@src/editors/EditorComponent';
+import PdfEditingModal from '@src/editors/containers/PdfEditor/components/PdfEditingModal';
+
+const PdfEditorContainer: React.FC<EditorComponent> = (props) => {
+  const { fields } = useContext(PdfBlockContext);
+  return (
+    <Formik initialValues={fields} onSubmit={() => undefined}>
+      <PdfEditingModal {...props} />
+    </Formik>
+  );
+};
+
+export default PdfEditorContainer;

src/editors/containers/PdfEditor/components/messages.ts

@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+export const messages = defineMessages({
+  blockFailed: {
+    id: 'authoring.pdfEditor.blockFailed',
+    defaultMessage: 'PDF block failed to load',
+    description: 'Error message for PDF block failing to load',
+  },
+  blockLoading: {
+    id: 'authoring.pdfEditor.blockLoading',
+    defaultMessage: 'Loading PDF Editor',
+    description: 'Message shown to screen readers when the PDF block is loading.',
+  },
+});
+
+export const fileUploadMessages = defineMessages({
+  urlFieldLabel: {
+    id: 'authoring.pdfEditor.urlFieldLabel',
+    defaultMessage: 'PDF URL',
+    description: 'Label for the PDF URL field',
+  },
+});

src/editors/containers/PdfEditor/components/sections/DownloadOptions.tsx

@@ -0,0 +1,54 @@
+import { Form } from '@openedx/paragon';
+import CollapsibleFormWidget
+  from '@src/editors/sharedComponents/CollapsibleFormWidget/CollapsibleFormWidget';
+import { useFormikContext } from 'formik';
+import { PdfState } from '@src/editors/containers/PdfEditor/contexts';
+import { optional, useUrlValidator } from '@src/editors/utils/validators';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import CheckboxField from '@src/editors/sharedComponents/CheckboxField';
+import TextField from '@src/editors/sharedComponents/TextField';
+import messages from './messages';
+
+const DownloadOptions = () => {
+  const intl = useIntl();
+  const { errors, values } = useFormikContext<PdfState>();
+  const isError = !!(errors.allowDownload?.length || errors.sourceText?.length || errors.sourceUrl?.length);
+  const urlValidator = optional(useUrlValidator());
+  if (values.disableAllDownload) {
+    // Download configuration is disabled at the instance-level, so don't even show these options.
+    return <></>; // eslint-disable-line react/jsx-no-useless-fragment
+  }
+  return (
+    <CollapsibleFormWidget
+      fontSize="x-small"
+      title={intl.formatMessage(messages.downloadOptions)}
+      isError={isError}
+    >
+      <Form.Group>
+        <CheckboxField
+          label={intl.formatMessage(messages.allowDownloadLabel)}
+          id="pdf-allow-download"
+          hint={intl.formatMessage(messages.allowDownloadHint)}
+          fieldConfig="allowDownload"
+        />
+        <TextField
+          label={intl.formatMessage(messages.sourceDocumentButtonTextLabel)}
+          id="pdf-source-text"
+          placeholder={intl.formatMessage(messages.sourceDocumentButtonTextPlaceholder)}
+          name="sourceText"
+          disabled={!values.allowDownload}
+        />
+        <TextField
+          label={intl.formatMessage(messages.sourceUrlLabel)}
+          name="sourceUrl"
+          id="pdf-source-url"
+          hint={intl.formatMessage(messages.sourceUrlHint)}
+          disabled={!values.allowDownload}
+          fieldConfig={{ validate: urlValidator }}
+        />
+      </Form.Group>
+    </CollapsibleFormWidget>
+  );
+};
+
+export default DownloadOptions;