Editable template - MVP components reference pages #4
Conversation
| <iframe width="560" height="315" src="https://www.youtube.com/embed/JJ60OdkNWJw" | ||
| frameborder="0"></iframe> |
There was a problem hiding this comment.
iframe should not be allowed
Is this test are the inital state or the end state?
Is it to ensure that no iframe can be added?
| `; // Create a temporary div element | ||
| var tempDiv = document.createElement('div'); // Set the HTML content to the div | ||
| tempDiv.innerHTML = htmlContent; // Iterate through child nodes to check for sensitive tags | ||
| tempDiv.childNodes.forEach(function(node) { | ||
| if (node.nodeType === 1) { // Check if it's an element node | ||
| var tagName = node.tagName.toLowerCase(); | ||
| // Check for sensitive tags to be stripped (e.g., script) | ||
| if (tagName === 'script') { | ||
| console.log('Sensitive tag (script) found and stripped.'); | ||
| // Remove the node if it's a script tag | ||
| tempDiv.removeChild(node); | ||
| } | ||
| } | ||
| }); // Get the sanitized HTML content | ||
| var sanitizedHTML = tempDiv.innerHTML; // Log the sanitized HTML content | ||
| console.log('Sanitized HTML content:'); | ||
| console.log(sanitizedHTML); } // Call the function to test embedding | ||
| testEmbedding(); |
There was a problem hiding this comment.
Comment: Custom JS should not be allowed.
Test: Ensure the <script> tag is removed
Is this test are the inital state or the end state?
Is it to ensure that no Custom JS is executed?
| <div class=""> | ||
| <div class="row"> | ||
| <div class="title col-lg-12 col-xs-12"> | ||
| <h1 property="name" id="wb-cont" dir="ltr"> Embed html |
There was a problem hiding this comment.
Optimization: Remove the attribute dir=ltr
| <div class="container"> | ||
| <div class=""> | ||
| <div class="row"> | ||
| <div class="title col-lg-12 col-xs-12"> |
There was a problem hiding this comment.
For maintenance: considering the custom AEM class are not prefixed anymore, we will need a registry will all those "reserved" class in order to prevent future conflict
Here I am referring to the CSS class name "title".
| <div class="embed-html embed col-lg-12"> | ||
| <div id="embed-html-a323bd79b0" class="cmp-embed"> |
There was a problem hiding this comment.
Maintenance CSS class name registry used by AEM
- embed-html
- embed
- cmp-embed
There was a problem hiding this comment.
Need a link with test description, Like Jira number in the page title or a text zone with the test info at the beginning of the page
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Add an empty line at the end of the document
| </div> | |
| </div> | |
| <figure data-cmp-is="image" data-cmp-widths="600,1200" | ||
| data-cmp-src="assets/img/canada-aem-template-icon-00.png" | ||
| data-cmp-filereference="assets/img/canada-aem-template-icon-00.png" | ||
| id="image-11078d76d6" data-cmp-hook-image="imageV3" class="cmp-image"> <img |
There was a problem hiding this comment.
Optimisation: Data attribute own and only use by the authoring interface should be removed.
| <figure data-cmp-is="image" data-cmp-widths="600,1200" | |
| data-cmp-src="assets/img/canada-aem-template-icon-00.png" | |
| data-cmp-filereference="assets/img/canada-aem-template-icon-00.png" | |
| id="image-11078d76d6" data-cmp-hook-image="imageV3" class="cmp-image"> <img | |
| <figure data-cmp-is="image" data-cmp-widths="600,1200" | |
| data-cmp-src="assets/img/canada-aem-template-icon-00.png" | |
| data-cmp-filereference="assets/img/canada-aem-template-icon-00.png" | |
| id="image-11078d76d6" data-cmp-hook-image="imageV3" class="cmp-image"> <img |
| </div> | ||
| </div> | ||
| <div class="image col-lg-12"> | ||
| <figure data-cmp-is="image" data-cmp-widths="600,1200" |
There was a problem hiding this comment.
Figure element? May be when there is a figcaption or + content yeah, but otherwise it can be a div like in this situation.
| <a class="cmp-list__item-link" | ||
| href="/content/canadasite/en/national-seniors-council/corporate/about-us.html"> | ||
| <span class="cmp-list__item-title">About Us</span> </a> |
There was a problem hiding this comment.
Optimization Is the <span> needed? If not if need to be removed.
| <div class="cmp-container"> | ||
| <div class=""> | ||
| <div | ||
| class="mwsmulti-list aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--5 aem-GridColumn--offset--default--0"> |
| <li>velit purus blandit mi, et egestas diam mauris ac nisl. S</li> | ||
| </ul> | ||
| <ol> | ||
| <li>ed sit amet <a id="Mauris"></a>lobortis mi. </li> |
There was a problem hiding this comment.
No empty anchor.
| <li>ed sit amet <a id="Mauris"></a>lobortis mi. </li> | |
| <li id="Mauris">ed sit amet lobortis mi. </li> |
| <li>Donec id <a title="List advanced" | ||
| href="/content/canadasite/en/service-canada/editable-template-qa/mihai/list-advanced-component.html" | ||
| target="_blank">semper tellus.</a></li> |
There was a problem hiding this comment.
No title and no target. If target is used, additional configuration is required for security purpose
| <li>Donec id <a title="List advanced" | |
| href="/content/canadasite/en/service-canada/editable-template-qa/mihai/list-advanced-component.html" | |
| target="_blank">semper tellus.</a></li> | |
| <li>Donec id <a href="/content/canadasite/en/service-canada/editable-template-qa/mihai/list-advanced-component.html">semper tellus.</a></li> |
| </div> | ||
| <div class="title col-lg-12"> | ||
| <h2 dir="ltr"> h2 heading | ||
| </h2> | ||
| </div> | ||
| <div class="title col-lg-12"> | ||
| <h3 dir="ltr"> h3 heading | ||
| </h3> | ||
| </div> | ||
| <div class="title col-lg-12"> | ||
| <h4 dir="ltr"> h4 heading | ||
| </h4> | ||
| </div> | ||
| <div class="title col-lg-12"> | ||
| <h5 dir="ltr"> h5 heading | ||
| </h5> | ||
| </div> | ||
| <div class="title col-lg-12"> | ||
| <h6 dir="ltr"> h6 heading | ||
| </h6> | ||
| </div> |
There was a problem hiding this comment.
No text direction required
| </div> | |
| <div class="title col-lg-12"> | |
| <h2 dir="ltr"> h2 heading | |
| </h2> | |
| </div> | |
| <div class="title col-lg-12"> | |
| <h3 dir="ltr"> h3 heading | |
| </h3> | |
| </div> | |
| <div class="title col-lg-12"> | |
| <h4 dir="ltr"> h4 heading | |
| </h4> | |
| </div> | |
| <div class="title col-lg-12"> | |
| <h5 dir="ltr"> h5 heading | |
| </h5> | |
| </div> | |
| <div class="title col-lg-12"> | |
| <h6 dir="ltr"> h6 heading | |
| </h6> | |
| </div> | |
| </div> | |
| <div class="title col-lg-12"> | |
| <h2> h2 heading | |
| </h2> | |
| </div> | |
| <div class="title col-lg-12"> | |
| <h3> h3 heading | |
| </h3> | |
| </div> | |
| <div class="title col-lg-12"> | |
| <h4> h4 heading | |
| </h4> | |
| </div> | |
| <div class="title col-lg-12"> | |
| <h5> h5 heading | |
| </h5> | |
| </div> | |
| <div class="title col-lg-12"> | |
| <h6> h6 heading | |
| </h6> | |
| </div> |
| <div class="title col-lg-12 col-lg-offset-0 col-xs-6"> | ||
| <h2 id="h2-id" dir="ltr"> h2 heading having the width of 6 columns on xs screen | ||
| </h2> | ||
| </div> |
There was a problem hiding this comment.
Can we have an example where text is right to left along with a different language tag, like in Arabic?
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
| </div> | |
| </div> | |
This PR contains reference html pages having the html output of the editable templates MVP components.