[Refactor:TAGrading] Move markdownarea to vue by lavalleeale · Pull Request #11872 · Submitty/Submitty

lavalleeale · 2025-07-11T16:07:35Z

Why is this Change Important & Necessary?

Currently markdownarea uses twig and therefore when it has to be rendered client-side for tagrading it uses twigjs which makes moving any code that interacts with it to vue far more difficult.

What is the New Behavior?

Markdownarea is moved to vuejs

What steps should a reviewer take to reproduce or test the bug or new feature?

Automated Testing & Documentation

Other information

codecov · 2025-07-11T16:08:46Z

Codecov Report

Attention: Patch coverage is 0% with 8 lines in your changes missing coverage. Please review.

Project coverage is 20.58%. Comparing base (3b5f3ef) to head (aa2cf51).
Report is 3 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff              @@
##               main   #11872      +/-   ##
============================================
- Coverage     20.60%   20.58%   -0.02%     
+ Complexity     9279     9278       -1     
============================================
  Files           267      268       +1     
  Lines         35519    35539      +20     
  Branches        455      457       +2     
============================================
  Hits           7317     7317              
- Misses        27751    27769      +18     
- Partials        451      453       +2

Flag	Coverage Δ
autograder	`21.34% <ø> (ø)`
js	`2.09% <0.00%> (-0.02%)`	⬇️
migrator	`100.00% <ø> (ø)`
php	`19.26% <ø> (+<0.01%)`	⬆️
python_submitty_utils	`80.08% <ø> (ø)`
submitty_daemon_jobs	`88.88% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 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.

williamschen23

https://github.com/user-attachments/assets/945f604c-b403-4004-8eed-675da9f4b801
Markdown options only available on refresh

site/public/templates/misc/Vue.twig

site/vue/src/components/markdownArea.vue

williamschen23 · 2025-07-17T16:35:55Z

site/ts/solution-ta-notes.ts

+        success: function (res: string) {
+            const response = JSON.parse(res) as SolutionTaNotesResponse;
+            if (response.status === 'success') {
                displaySuccessMessage('Solution has been updated successfully');
                // Dom manipulation after the Updating/adding the solution note
-                $(`#solution-box-${component_id}`).attr('data-first-edit', 0);
+                $(`#solution-box-${component_id}`).attr('data-first-edit', '0');

                // Updating the last edit info
                $(`#solution-box-${component_id} .last-edit`).removeClass('hide');
-                $(`#solution-box-${component_id} .last-edit i.last-edit-time`).text(res.data.edited_at);
+                $(`#solution-box-${component_id} .last-edit i.last-edit-time`).text(response.data.edited_at);
                $(`#solution-box-${component_id} .last-edit i.last-edit-author`).text(
-                    res.data.current_user_id === res.data.author ? `${res.data.author} (You)` : res.data.author,
+                    response.data.current_user_id === response.data.author ? `${response.data.author} (You)` : response.data.author,
                );

                $(`#solution-box-${component_id}`).find('.solution-cont')
-                    .attr('data-original-solution', $(`#textbox-solution-${component_id}`).val());
+                    .attr('data-original-solution', ($(`#textbox-solution-${component_id}`).val() as string ?? ''));

                const save_button = $(`#solution-box-${component_id}`).find('.solution-save-btn');
                save_button.prop('disabled', true);


can we avoid jquery here?

williamschen23

Functionality reviews:
When clicking "preview", the insert markdown buttons don't disappear
When refreshing the forums, the toggle button does not stick

williamschen23

https://github.com/user-attachments/assets/774ecf90-12d1-4317-be12-c14545b5cd3
I think this is the last thing, I don't have any problems with the code.
The forum new thread markdown renders weirdly

williamschen23

Every markdown box that changes in the PR works. The way the the markdown box is rendered in the code is pretty clear. The v-html is safe as it comes from twig, which automatically escapes dangerous elements

### Why is this Change Important & Necessary?  This moves the first tagrading panel to vue. ### What is the New Behavior?  Solution notes is rendered with vue and the twig + separate scripts are removed. ### What steps should a reviewer take to reproduce or test the bug or new feature? ### Automated Testing & Documentation  ### Other information  This is meant to be merged after #11872

### Why is this Change Important & Necessary? Resolves #12068 Markdown toggle on Forum replies does not function correctly (see issue for more details). Also, toggling markdown may erase the contents of the text box in certain cases. Bug introduced by Vue refactor #11872 where markdown toggle logic is moved to cookie ### What is the New Behavior? Vue component has been updated to directly read+write to original HTML form input, removed unnecessary cookie Markdown fields without toggle functionality are preserved It is worth investigating to find a better solution for propagating Vue state updates to outer DOM in the future.

move markdownarea to vue

4436515

github-project-automation bot added this to Submitty Development Jul 11, 2025

github-project-automation bot moved this to Seeking Reviewer in Submitty Development Jul 11, 2025

move all markdownareas

43cb034

lavalleeale marked this pull request as draft July 11, 2025 17:08

automateprojectmangement bot moved this from Seeking Reviewer to Work in Progress in Submitty Development Jul 11, 2025

lavalleeale and others added 12 commits July 11, 2025 13:43

update

54a5934

update for tests

70c6a3c

Merge branch 'main' into markdownarea-vue

5ca900c

fix for tests

8f3ac41

fix accessibility

adb7337

fix notebookbuilder widget

7e10836

update baseline

403a594

Merge branch 'main' into markdownarea-vue

fde8dfe

fix tests

4a5ee8e

remove escapes

7cf3c42

fix race

bab9f24

fix events

49f6c5b

lavalleeale requested a review from williamschen23 July 15, 2025 19:34

lavalleeale marked this pull request as ready for review July 15, 2025 19:34

automateprojectmangement bot moved this from Work in Progress to Seeking Reviewer in Submitty Development Jul 15, 2025

williamschen23 requested changes Jul 17, 2025

View reviewed changes

github-project-automation bot moved this from Seeking Reviewer to Work in Progress in Submitty Development Jul 17, 2025

lavalleeale added 3 commits July 17, 2025 12:55

fix naming

93ad7f2

import buildUrl

0f15191

change capitalization

93c2520

lavalleeale mentioned this pull request Jul 17, 2025

[Refactor:TAGrading] Move solution notes to vue #11885

Merged

Merge branch 'main' into markdownarea-vue

e8856cd

lavalleeale requested a review from williamschen23 July 17, 2025 17:50

automateprojectmangement bot moved this from Work in Progress to In Review in Submitty Development Jul 17, 2025

lavalleeale added 4 commits July 17, 2025 14:09

Fix: Use window scope for displaySuccessMessage and displayErrorMessage

86693fa

fix formatting

e36d7d8

fix caps

f807a5a

Merge remote-tracking branch 'origin/main' into markdownarea-vue

267882a

williamschen23 requested changes Jul 21, 2025

View reviewed changes

github-project-automation bot moved this from In Review to Work in Progress in Submitty Development Jul 21, 2025

lavalleeale added 2 commits July 21, 2025 14:09

fixes for williams

ea3b6c2

Merge remote-tracking branch 'origin/main' into markdownarea-vue

aa2cf51

williamschen23 requested changes Jul 22, 2025

View reviewed changes

williamschen23 approved these changes Jul 22, 2025

View reviewed changes

github-project-automation bot moved this from Work in Progress to Awaiting Maintainer Review in Submitty Development Jul 22, 2025

bmcutler merged commit ad4f378 into main Jul 22, 2025
46 of 48 checks passed

bmcutler deleted the markdownarea-vue branch July 22, 2025 19:30

skara9 mentioned this pull request Sep 19, 2025

[Bugfix:Forum] Fix Markdown Toggle on Forum Replies #12071

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Refactor:TAGrading] Move markdownarea to vue#11872

[Refactor:TAGrading] Move markdownarea to vue#11872
bmcutler merged 24 commits intomainfrom
markdownarea-vue

lavalleeale commented Jul 11, 2025

Uh oh!

codecov bot commented Jul 11, 2025 •

edited

Loading

Uh oh!

williamschen23 left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

williamschen23 Jul 17, 2025

Uh oh!

lavalleeale Jul 17, 2025

Uh oh!

williamschen23 left a comment

Uh oh!

williamschen23 left a comment

Uh oh!

williamschen23 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

lavalleeale commented Jul 11, 2025

Why is this Change Important & Necessary?

What is the New Behavior?

What steps should a reviewer take to reproduce or test the bug or new feature?

Automated Testing & Documentation

Other information

Uh oh!

codecov bot commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

williamschen23 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

williamschen23 Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

lavalleeale Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

williamschen23 left a comment

Choose a reason for hiding this comment

Uh oh!

williamschen23 left a comment

Choose a reason for hiding this comment

Uh oh!

williamschen23 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov bot commented Jul 11, 2025 •

edited

Loading