fix: improvements in editor exprience by ahtesham-quraish · Pull Request #2892 · mitodl/mit-learn

ahtesham-quraish · 2026-01-26T13:29:21Z

What are the relevant tickets?

Description (What does it do?)

Following Improvements we have done in this PR

Pagination margin from bottom has been decreased
If image is not loaded because of any reason then we need to display placeholder instead broken image ui
The header part where breadcrum is visible should not have padding bottom other than first page.
If we have links in summary then it should be visible properly instead of text.

Screenshots (if appropriate):

How can this be tested?

For image placeholder testing you just need to provide url for the image which is not valid one you can provide random string instead of valid url in react compoenent
2 - On page 2, 3 and so on you should not see the extra bottom padding in banner image.
3 - If you add the url to text by using the editor control or even paste the direct url in the sub-heading sectionwhile creating or updating the article then it should be properly render inside the listing page summary section of each News

Additional Context

jonkafton · 2026-01-27T16:03:52Z

@@ -23,14 +23,20 @@ const collapseWhitespace = (text: string): string => {
 const linkifyText = (text: string): string => {
  if (!text) return ""
  console.log("Linkifying text:", text)


Can we remove the console.log

jonkafton · 2026-01-27T16:08:12Z

    <MainStoryCard>
      <MainStoryImage>
-        {item.image?.url && (
+        {item.image?.url && !imageError && (


Perhaps use a placeholder here, if the image errors.

It automatically shows the placeholder when we get error

jonkafton · 2026-01-27T16:13:39Z

+const ArticleBannerStyled = styled(ArticleBanner)<{ $page: number }>`
  padding: 48px 0;
-  padding-bottom: 250px;
+  ${({ $page }) => $page === 1 && "padding-bottom: 250px;"}


We don't tend to use $ prefixes for variable names and props in the codebase. Note that the $ prefix to mark a prop as transient is a styled-components thing, but Emotion does not support.

jonkafton · 2026-01-27T16:20:45Z

  padding: 48px 0;
-  padding-bottom: 250px;
+  ${({ $page }) => $page === 1 && "padding-bottom: 250px;"}
  position: relative;


Note that we object styles are preferred over template literals for type safety, ease of refactoring etc, also there was a plan to migrate to styled() or Pigment CSS for zero runtime / performance, which may resurface, see https://github.com/mitodl/hq/issues/6636.

e.g. L435 cleaner with

paddingBottom: page === 1 ? "250px" : undefined,

jonkafton · 2026-01-27T16:21:44Z

@@ -497,6 +499,8 @@ const MainStory: React.FC<{ item: NewsFeedItem }> = ({ item }) => {

 // Regular Story Component for grid


Let's add comments only if the code does not self describe.

jonkafton · 2026-01-27T16:25:06Z

@@ -23,14 +23,20 @@ const collapseWhitespace = (text: string): string => {
 const linkifyText = (text: string): string => {


Do we still need linkifyText() if links are now produced on the backend?

Yes it is still needed because if user directly paste the url in summary then it would have to add achor tag in summary text.

jonkafton

👍

fix: improvements in editor exprience

38d8efb

jonkafton suggested changes Jan 27, 2026

View reviewed changes

address review

1b46422

ahtesham-quraish force-pushed the ahtesham/improvements branch from fd562ef to 1b46422 Compare January 28, 2026 10:04

ahtesham-quraish requested a review from jonkafton January 29, 2026 09:57

ahtesham-quraish added the Needs Review An open Pull Request that is ready for review label Jan 29, 2026

jonkafton approved these changes Jan 30, 2026

View reviewed changes

jonkafton removed the Needs Review An open Pull Request that is ready for review label Jan 30, 2026

ahtesham-quraish merged commit f3ca00a into main Jan 30, 2026
13 checks passed

ahtesham-quraish deleted the ahtesham/improvements branch January 30, 2026 14:24

This was referenced Feb 2, 2026

Release 0.53.2 #2911

Closed

Release 0.53.3 #2918

Merged

		@@ -497,6 +499,8 @@ const MainStory: React.FC<{ item: NewsFeedItem }> = ({ item }) => {

		// Regular Story Component for grid

		@@ -23,14 +23,20 @@ const collapseWhitespace = (text: string): string => {
		const linkifyText = (text: string): string => {

Conversation

ahtesham-quraish commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What are the relevant tickets?

Description (What does it do?)

Screenshots (if appropriate):

How can this be tested?

Additional Context

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!

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!

jonkafton left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ahtesham-quraish commented Jan 26, 2026 •

edited

Loading