feat: TinyMCE plugin insert iframe

[johnvente]

Description

This PR adds a TinyMCE plugin that enables the insertion of an iframe with its respective width and height dimensions, along with additional properties. It is similar to the official plugin found at:
Page Embed Plugin - Tiny Documentation

The plugin contains two tabs:

• General tab: This tab allows us to add:

  • Source URL: the URL of the iframe (required)
  • Size: This allows us to add the size of the iframe in pixels
    • Inline value: Allows us to add custom width and height (px format)
    • Big embed: Will add a value of 800px for the width and the height
    • Small embed: Will add a value of 100px for the width and the height

• Advanced tab: This tab allows us to add metadata (optional) for the iframe

  • Name: name attribute for the iframe
  • Title: title attribute for the iframe
  • Long description URL: longdesc attribute for the iframe
  • Show iframe border: A black border for the iframe container (checkbox)
  • Enable scrollbar: enable scrollbar for the iframe (checkbox)

DEMO

demo.mp4

General tab	Advanced tab

How to test it (Devstack)

You need to have this Waffle flag activated

new_core_editors.use_new_text_editor

Doc here

1. Go to ~/workspace/frontend-app-course-authoring

 cd ~/workspace/frontend-app-course-authoring 

2. Create a file called module.config.js with the following config

module.exports = {
  localModules: [
    {
      moduleName: "@edx/frontend-lib-content-components/dist",
      dir: "./frontend-lib-content-components",
      dist: "src",
    },
    {
      moduleName: "@edx/frontend-lib-content-components",
      dir: "./frontend-lib-content-components",
      dist: "src",
    },
  ],
};

3. Clone frontend-lib-content-components

git fetch origin pull/427/head:jv/tiny-mce-plugin-iframe-embed
git checkout jv/tiny-mce-plugin-iframe-embed

4. initialize frontend-app-course-authoring

npm start

Note: Due to jsdom is not supported by tinyMCE we are adding test only for the plugin
check more here

[openedx-webhooks]

Thanks for the pull request, @johnvente! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[e0d]

This is still a draft, but there are some failures.

[johnvente]

@e0d Hi there! this is ready for review now, I've fixed the failures

[santiagosuarezedunext]

Thanks @johnvente for this implementation! Please add unit tests to ensure the robustness of the code.

[santiagosuarezedunext]

Hey @jmakowski1123, any suggestions on who might be a good fit to review this? 👍

[codecov]

Codecov Report

Attention: 1 lines in your changes are missing coverage. Please review.

Comparison is base (6945234) 90.57% compared to head (a33a140) 90.70%.
Report is 9 commits behind head on main.

Files	Patch %	Lines
...ceWidget/customTinyMcePlugins/embedIframePlugin.js	98.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #427      +/-   ##
==========================================
+ Coverage   90.57%   90.70%   +0.12%     
==========================================
  Files         227      229       +2     
  Lines        4129     4206      +77     
  Branches      831      855      +24     
==========================================
+ Hits         3740     3815      +75     
- Misses        369      371       +2     
  Partials       20       20              

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

[johnvente]

Hi @santiagosuarezedunext! I've added the unit tests for the plugin

[jmakowski1123]

@mphilbrick211 This one already went through Product Review :) https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3887071233/Problem+Authors+don+t+have+enough+options+to+create+the+content+they+would+like

Let's touch base on how to connect the updated product review process, as this is the preferred way forward (ie, proposals get product review and approval before the PR is submitted, which is exactly what happened here.)

[santiagosuarezedunext]

Hi @mphilbrick211 😊
Who do you think would be the right person to review this PR?

[mphilbrick211]

Hi @mphilbrick211 😊 Who do you think would be the right person to review this PR?

Hi @santiagosuarezedunext! The reviewing team would be @openedx/teaching-and-learning, but they are out for the holidays until January.

[santiagosuarezedunext]

Hi @mphilbrick211
I hope you had a fantastic holiday break. I wanted to check in about the reviewing team, @openedx/teaching-and-learning, being out until January. Is there any update or progress on the matter?

Your assistance is greatly appreciated. Thank you!

Best regards.

[mphilbrick211]

Thanks for flagging, @santiagosuarezedunext! @openedx/2u-tnl @openedx/teaching-and-learning flagging for you!

[johnvente]

Hi there @santiagosuarezedunext! Do you think this implementation should it be in a waffle flag?

[mariajgrimaldi]

I tested this in my local environment using Tutor, and it works as described in the cover letter! Thank you. Let me know if anything else changes.

[johnvente]

Hi there @navinkarkera! We know that you are not maintainer from this repository but could you take a look in this PR? That would help us a lot. Thank you very much!

[santiagosuarezedunext]

@johnvente, it's not necessary. Unlike other cases, this development received product approval without being flagged behind a waffle flag, and this is because it's an isolated improvement that doesn't affect any workflow or add anything new; it's just an enhancement to something that could already be done.
CC: @jmakowski1123 @mphilbrick211

[BryanttV]

Hi @johnvente, I also tested the implementation using tutor and it worked perfectly!

[openedx-webhooks]

@johnvente 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.