feat: wip pdf authoring by Kelketek · Pull Request #2916 · openedx/frontend-app-authoring

Kelketek · 2026-02-27T22:20:15Z

Description

This pull request adds PDF Authoring.

Visual Changes

Before

pdf-old-screencast.mp4

After

pdf-block-demo.mp4

Supporting information

https://openedx.atlassian.net/wiki/spaces/OEPM/pages/5335908397/Proposal+Add+PDF+Block+to+Base+Installation

Testing instructions

Follow the instructions in this repository's README to set up a dev environment for this block.
Use this branch of edx-platform to get the backend to signal to the frontend that the PDF block can be edited in the new MFE.
Use this version of xblocks-contrib to get the new data fetching endpoint
Add the PDF block to your course by adding "pdf" to the advanced modules list.
Add a PDF block
Configure the settings. Try to break it. Save. Edit. Save again. Try manually specifying a URL. Be creative :)

Other information

These changes create much more generalizable parallel functionality to some of the functionality which already exists but is mired in Redux. They're worth examining and may be used by the next developer looking to add official MFE editing support for another block.

Best Practices Checklist

We're trying to move away from some deprecated patterns in this codebase. Please
check if your PR meets these recommendations before asking for a review:

Any new files are using TypeScript (.ts, .tsx).
Avoid propTypes and defaultProps in any new or modified code.
Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks)
Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
All new i18n messages in messages.ts files have a description for translators to use.
Avoid using ../ in import paths. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

openedx-webhooks · 2026-02-27T22:20:19Z

Thanks for the pull request, @Kelketek!

This repository is currently maintained by @bradenmacdonald.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Update the status of your PR

Your PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2026-03-03T23:14:19Z

Codecov Report

❌ Patch coverage is 45.13274% with 124 lines in your changes missing coverage. Please review.
✅ Project coverage is 95.14%. Comparing base (24e1c73) to head (129b7e5).

Files with missing lines	Patch %	Lines
...iners/PdfEditor/components/fields/UploadWidget.tsx	25.00%	37 Missing and 2 partials ⚠️
...ontainers/PdfEditor/components/PdfEditingModal.tsx	43.33%	15 Missing and 2 partials ⚠️
src/editors/containers/PdfEditor/api.ts	40.90%	13 Missing ⚠️
...ntainers/PdfEditor/components/fields/validators.ts	25.00%	11 Missing and 1 partial ⚠️
src/editors/containers/PdfEditor/contexts.tsx	38.88%	11 Missing ⚠️
...ntainers/PdfEditor/components/fields/TextField.tsx	36.36%	7 Missing ⚠️
.../PdfEditor/components/sections/DownloadOptions.tsx	56.25%	6 Missing and 1 partial ⚠️
...ners/PdfEditor/components/fields/CheckboxField.tsx	40.00%	6 Missing ⚠️
src/course-unit/add-component/AddComponent.tsx	44.44%	5 Missing ⚠️
...ainers/PdfEditor/components/PdfEditorContainer.tsx	66.66%	3 Missing ⚠️
... and 3 more

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2916      +/-   ##
==========================================
- Coverage   95.51%   95.14%   -0.38%     
==========================================
  Files        1329     1343      +14     
  Lines       30557    30773     +216     
  Branches     6925     6949      +24     
==========================================
+ Hits        29186    29278      +92     
- Misses       1303     1421     +118     
- Partials       68       74       +6

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

samuelallan72

@Kelketek I tested this locally and found it worked as advertised, including testing with and without PDFXBLOCK_DISABLE_ALL_DOWNLOAD = True in openedx-platform settings. I've made some comments inline for consideration.

samuelallan72 · 2026-03-13T04:11:00Z

...tors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/hooks.jsx

 };

-export default { fileInput, fileSizeError, parseHandoutName };
+export const checkValidFileSize = ({


nit: to reduce diff noise, this function could be moved back to its original location?

samuelallan72 · 2026-03-13T05:05:57Z

src/editors/sharedComponents/CheckboxField/CheckboxField.tsx

@@ -0,0 +1,30 @@
+import React from 'react';


This checkbox field is somewhat generic, and probably could go under src/editors/sharedComponents somewhere.

Also, there is an existing FormCheckbox; I'm not sure if that can simply be reused?

The existing one is part of the SelectableBox set. It appears to be deprecated? It doesn't support Formik, either, so it has a lot of manual machinery that has to be managed.

I'll see about putting it somewhere else.

samuelallan72 · 2026-03-13T05:07:25Z

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

+  },
+  easyMode: {
+    id: 'authoring.pdfEditor.widgets.uploadWidget.easyMode',
+    defaultMessage: 'Easy Mode',


I feel like "easy mode" is slightly confusing, although I'm not sure what it should be. Something for Cassie to look at in product review. :)

samuelallan72 · 2026-03-13T05:12:43Z

src/editors/containers/PdfEditor/components/fields/UploadWidget.tsx

+  const deriveFileName = (rawName: string) => {
+    const segments = rawName.split('/').reverse();
+    const name = intl.formatMessage(messages.defaultName);
+    for (let segment of segments) {


I'm not sure falling back to other url segments for deriving the name will have the desired effect. Perhaps simply falling back to the defaultName if the first url segment doesn't work?

samuelallan72 · 2026-03-13T05:15:43Z

src/editors/containers/PdfEditor/components/fields/UploadWidget.tsx

+      >
+        {urlFieldMeta.error!}
+      </ErrorAlert>
+      {manualMode && <TextField label="PDF Url" id="pdf-url" name="url" />}


Just flagging an untranslated string "PDF Url".

samuelallan72 · 2026-03-13T05:16:20Z

src/editors/containers/PdfEditor/components/fields/UploadWidget.tsx

+                src={MoreHoriz}
+                iconAs={Icon}
+                variant="primary"
+                alt="Actions dropdown"


Another untranslated string that's user-facing.

samuelallan72 · 2026-03-13T05:18:10Z

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

@@ -0,0 +1,53 @@
+import { Form } from '@openedx/paragon';
+import CollapsibleFormWidget
+  from '@src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget';


future refactoring opportunity: move CollapsibleFormWidget to sharedComponents.

samuelallan72 · 2026-03-13T05:36:18Z

src/editors/sharedComponents/UploadWidget/UploadWidget.tsx

+      {manualMode && <TextField label="PDF Url" id="pdf-url" name="url" />}
+      {!manualMode && (
+      <>
+        <FileInput supportedFileFormats={supportedFileFormats} fileInput={fileInput} />


Currently the file input behaviour here when you select a file using the "replace" button is:

Immediately upload the new file to studio assets without confirmation. This means if you change your mind and pick a different file, or cancel the editor altogether, the file is still uploaded to studio assets.

Ignore any previously uploaded file, leaving it in studio assets.

I don't think this behaviour matches user expectations or the expected meaning of "replace" here. I'm not sure what would be best, but some inline information to explain the behaviour, and/or changing the behaviour, might be helpful here. Eg. adding a warning about how uploads work and where they're uploaded to, and maybe only performing the upload when the editor is saved?

@samuelallan72 This behavior matches the behavior of the video handout upload field. While I agree that the auto-upload could be surprising, I believe the reason for it makes sense here based on the following:

The 'save' button isn't something the block can capture and modify the behavior of. That machinery is outside of the editor's control.

The only way to determine the URL value for the field is to have performed the upload, so it must be done before the user hits save.

No other field on a block editor requires an additional extra save action. Users expect that hitting 'save' saves everything they've done, and if they forget to hit an additional 'upload' button, they may think things broke.

One way that this field departs from the Handout widget is that there is no 'delete handout' equivalent, because the URL is a required field. Even when you select that option, though, it only sets the field 'null' and doesn't remove the file from the course assets.

samuelallan72 · 2026-03-13T06:03:10Z

Some notes on how I set things up locally for testing this PR along with openedx/openedx-platform#38148 and openedx/xblocks-contrib#193 , since there were several steps.
A rough reconstruction of the commands:

# my master devstack with master branch of edx-platform mounted
cd devstack-master
cd edx-platform
git remote update
git checkout fox/pdf-editor
cd ..

g c git@github.com:openedx/frontend-app-authoring
cd frontend-app-authoring
g remote add opencraft git@github.com:open-craft/frontend-app-authoring
git remote update
git checkout fox/pdf-authoring
cd ..
tutor mounts add ./frontend-app-authoring/

tutor images build mfe
tutor images build openedx-dev
tutor dev launch -I

# install xblocks-contrib into the cms and lms environment.
# It must be done this way due it being a core requirement of openedx-platform (ie. it cannot be in the pip extra requirements)(?).
tutor dev exec cms pip install -e git+https://github.com/open-craft/xblocks-contrib.git@fox/pdf-struct-return#egg=xblocks_contrib
tutor dev exec lms pip install -e git+https://github.com/open-craft/xblocks-contrib.git@fox/pdf-struct-return#egg=xblocks_contrib

tutor dev stop
tutor dev launch -I

# not sure how this works, but authoring needs to be running locally (otherwise it's just a blank page for me...)
tutor dev stop authoring
cd frontend-app-authoring
npm ci
npm run dev

Waffle flag

for the legacy_studio.pdf_editor waffle flag editing, visit http://studio.local.openedx.io:8001/admin/waffle/flag/

This flag didn't work for me.

Testing the frontend

import the demo course, or make a new course
add "pdf" to the advanced components list
add a pdf component and play with it. :)

Testing globally disabling the pdf download button

I used this single-file tutor plugin:

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
    (
        "openedx-common-settings",
        "PDFXBLOCK_DISABLE_ALL_DOWNLOAD = True"
    )
)

And did

tutor dev stop
tutor dev launch -I

(This worked fine.)

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Feb 27, 2026

openedx-webhooks added this to Contributions Feb 27, 2026

github-project-automation bot moved this to Needs Triage in Contributions Feb 27, 2026

Kelketek marked this pull request as draft February 27, 2026 22:20

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Mar 3, 2026

Kelketek force-pushed the fox/pdf-authoring branch from 1926631 to 1847a88 Compare March 3, 2026 21:30

openedx-webhooks added the core contributor PR author is a Core Contributor (who may or may not have write access to this repo). label Mar 6, 2026

This was referenced Mar 10, 2026

Proposal: Add PDF Block to Base Installation openedx/platform-roadmap#480

Open

feat: pdf editor authoring flag openedx/openedx-platform#38148

Open

feat: endpoint to get PDF settings openedx/xblocks-contrib#193

Open

Kelketek force-pushed the fox/pdf-authoring branch 2 times, most recently from 01e348a to 129b7e5 Compare March 13, 2026 00:44

samuelallan72 suggested changes Mar 13, 2026

View reviewed changes

Kelketek added 2 commits March 13, 2026 16:11

feat: pdf authoring

1b60b16

fix: address notes

ddd65e2

Kelketek force-pushed the fox/pdf-authoring branch from d986993 to ddd65e2 Compare March 13, 2026 21:11

Conversation

Kelketek commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Visual Changes

Before

After

Supporting information

Testing instructions

Other information

Best Practices Checklist

Uh oh!

openedx-webhooks commented Feb 27, 2026

Uh oh!

codecov bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

samuelallan72 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kelketek Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

samuelallan72 commented Mar 13, 2026

Waffle flag

Testing the frontend

Testing globally disabling the pdf download button

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Kelketek commented Feb 27, 2026 •

edited

Loading

codecov bot commented Mar 3, 2026 •

edited

Loading

Kelketek Mar 13, 2026 •

edited

Loading