feat: Add Custom Media Embed Plugin for Tiptap Editor

[ahtesham-quraish]

What are the relevant tickets?

In reference to https://github.com/mitodl/hq/issues/9276

Description (What does it do?)

We want to provide content creators with the ability to insert and customize embedded media inside the Tiptap editor.
The custom plugin should support adding video URLs, resizing the embedded player for different screens like medium.com has for media.

Screenshots (if appropriate):

How can this be tested?

• Hit the following url '/articles/new'
• You would see the video embed icon in toolbar, click on that
• A modal will open where you paste the url
• then give title of the article and if you want to change layout of video from control right above the video
• Give caption of the video
• click save, after that saving the content you will be redirecting to detail page of the article

[github-actions]

OpenAPI Changes

Show/hide 7 changes: 7 error, 0 warning, 0 info

7 changes: 7 error, 0 warning, 0 info
error	[request-parameter-enum-value-removed] at head/openapi/specs/v1.yaml	
	in API GET /api/v1/learning_resources_search/
		removed the enum value 'hybrid' from the 'query' request parameter 'search_mode'

error	[request-parameter-enum-value-removed] at head/openapi/specs/v1.yaml	
	in API GET /api/v1/learning_resources_user_subscription/
		removed the enum value 'hybrid' from the 'query' request parameter 'search_mode'

error	[request-parameter-enum-value-removed] at head/openapi/specs/v1.yaml	
	in API GET /api/v1/learning_resources_user_subscription/check/
		removed the enum value 'hybrid' from the 'query' request parameter 'search_mode'

error	[request-parameter-enum-value-removed] at head/openapi/specs/v1.yaml	
	in API POST /api/v1/learning_resources_user_subscription/subscribe/
		removed the enum value 'hybrid' from the 'query' request parameter 'search_mode'

error	[request-property-enum-value-removed] at head/openapi/specs/v1.yaml	
	in API POST /api/v1/learning_resources_user_subscription/subscribe/
		removed the enum value 'hybrid' of the request property 'search_mode/allOf[#/components/schemas/SearchModeEnum]/'

error	[request-property-enum-value-removed] at head/openapi/specs/v1.yaml	
	in API POST /api/v1/learning_resources_user_subscription/subscribe/
		removed the enum value 'hybrid' of the request property 'search_mode/allOf[#/components/schemas/SearchModeEnum]/'

error	[request-property-enum-value-removed] at head/openapi/specs/v1.yaml	
	in API POST /api/v1/learning_resources_user_subscription/subscribe/
		removed the enum value 'hybrid' of the request property 'search_mode/allOf[#/components/schemas/SearchModeEnum]/'

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[jonkafton]

The non-library code change looks clean and it's good to see that we can add plugin functionality with minimal code change.

Hit the following url '/articles/new' rest flow you can easily follow

This wasn't entirely true, for me at least. Could you detail the steps to test so it's clear what functionality to expect.

Some issues:

• From https://github.com/mitodl/hq/issues/9276:

  Add input UI (modal, slash command, toolbar button, etc.) for users to enter/paste video URLs.

  We have the new "Embed" button in the toolbar, but no slash command - not sure if that's a hard requirement for this PR but we have some demo code (link) if we do want to include.

  Use oEmbed or provider-specific logic to render the player.

  Is any renderer included? We are looking into using Video.js to render the video shorts section. This would be useful here for a consistent player to smooth differences between provider sources.

• We ideally don't want to use the browser window.prompt() interface to capture user input. Check e.g. the UpsertUserListDialog for input modal ol-components use and style.

• YouTube Shorts share links (https://www.youtube.com/shorts/VIDEO_ID) cannot be embedded. I get error: "Refused to display 'https://consent.youtube.com/' in a frame". This could be a region/GDPR constraint. The embed format does work - we should rewrite to https://www.youtube.com/embed/VIDEO_ID.

• The .media-container class sets a height of 100vh (full window height). They are therefore huge on the page and not contained between the header and footer. This is true for all layout variants. 16:9 wide videos are scaled down to the container width, but leaving a lot of vertical space.

[ahtesham-quraish]

We have the new "Embed" button in the toolbar, but no slash command - not sure if that's a hard requirement for this PR but we have some demo code (link) if we do want to include

• Initially we have added the requirement but later on we decided that we are going with simple functionality so I did not add it let me remove it from the requirements so it does not create confusion.

Is any renderer included? We are looking into using Video.js to render the video shorts section. This would be useful here for a consistent player to smooth differences between provider sources.

• We are going with simple approach, so we don't really need it for now at least for the initial release.

YouTube Shorts share links (https://www.youtube.com/shorts/VIDEO_ID) cannot be embedded. I get error: "Refused to display 'https://consent.youtube.com/' in a frame". This could be a region/GDPR constraint. The embed format does work - we should rewrite to https://www.youtube.com/embed/VIDEO_ID.

• You are right, I have added the support for shorts as well. Actually if we use this url https://www.youtube.com/watch?v=Unzc731iCUY then we need to convert it into embed formate which I am doing programmatically, we can not use the url directly because CORS issue.

We ideally don't want to use the browser window.prompt() interface to capture user input. Check e.g. the UpsertUserListDialog for input modal ol-components use and style.

• I have used the modal instead of window.prompt

[ahtesham-quraish]

The .media-container class sets a height of 100vh (full window height). They are therefore huge on the page and not contained between the header and footer. This is true for all layout variants. 16:9 wide videos are scaled down to the container width, but leaving a lot of vertical space.

• I have removed the height: 100vh and used the aspect ratio, the vertical space was due to padding on div, I have reduced that padding now

[jonkafton]

Looks good 👍

We were hoping to avoid changes to vendor code to ease upgrades, though I'm not sure how practical that is given TipTap's workflow that adds base code to the project. We should extend where possible or consider refactoring extension code into the project. I do want to better delineate the vendor code by putting it in its own folder.

A merge from main should fix the failing OpenAPI diff job.