Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add grid option enableHtmlRendering to use pure HTML not string #894

Merged
merged 8 commits into from
Nov 14, 2023

Conversation

ghiscoding
Copy link
Collaborator

@ghiscoding ghiscoding commented Oct 31, 2023

  • prior to this PR, SlickGrid only used html string that are then passed to innerHTML but that is not CSP (Content Security Policy) friendly, what could be nice is to provide an HTMLElement directly as Formatter and other areas of the code.
  • the goal is to eventually provide the option to the user to remove all usage of innerHTML within SlickGrid by using this new enableHtmlRendering grid option which would fix CSP unsafe issues.
  • this PR is NOT complete, at this point it only adds HTMLElement option to column names and Formatters (user can still pass html string, so it won't be a breaking change) but there are still some more usage of innerHTML elsewhere in the code.

subject covered by this PR

  • Formatters using pure HTMLElement
  • column name using pure HTMLElement

subject NOT covered yet by this PR

Example

prior to this PR, a Formatter would always return a string, even for HTML, like below

checkmarkFormatter(row, cell, val) {
  return `<span class="sgi sgi-check">${val}</span>`;
}

but now with this PR, we can now use pure HTML Element directly in Formatters dropping the need for innerHTML internally

checkmarkFormatter(row, cell, val) {
  const elm = document.createElement('span');
  elm.className = 'sgi sgi-check';
  elm.textContent = val;
  return elm;
}

@@ -21,6 +22,15 @@ describe('Example 4 - Model (ESM)', () => {
.each(($child, index) => expect($child.text()).to.eq(titles[index]));
});

it('should expect first row to include "Task 0" and other specific properties', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Task 0');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', '5 days');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have done a few changes in these files its simply adding a space between top: and the value and added ; at the end since this is what the default handling comes with

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah I saw that, the test will probably fail after merging your code into my branch, so I can review them afterward. Thanks for the info

- prior to this PR, SlickGrid only used html string that are then passed to `innerHTML` but that is not CSP (Content Security Policy) friendly, what could be nice is to provide an HTMLElement directly as Formatter and other areas of the code. The `enableHtmlRendering` option is basically to disable the use of `innerHTML` within SlickGrid
- this PR is NOT complete, at this point it only adds HTMLElement to Formatter but there are still some usage of `innerHTML` in the code
@ghiscoding ghiscoding marked this pull request as ready for review November 14, 2023 01:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants