-
Notifications
You must be signed in to change notification settings - Fork 108
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
Implement HTML component and cleanup Text component #999
Conversation
c052a0b
to
5b67d11
Compare
5b67d11
to
3ab1a7d
Compare
3ab1a7d
to
f0ee02d
Compare
f0ee02d
to
f0efa3b
Compare
f0efa3b
to
59e7f17
Compare
59e7f17
to
8333f61
Compare
768d064
to
8568751
Compare
I added a few things since:
Deployment: https://demo-642-relax-text-component--camunda-form-playground.netlify.app/ |
Will cleanup the commits a little before I merge :) |
@Skaiir I think you need to update the build config to handle
|
e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png
Outdated
Show resolved
Hide resolved
styleTags.forEach(styleTag => { | ||
const scopedCss = styleTag.textContent | ||
.split('}') | ||
.map(rule => { | ||
if (!rule.trim()) return ''; | ||
const [ selector, styles ] = rule.split('{'); | ||
const scopedSelector = selector | ||
.split(',') | ||
.map(sel => `#${styleScopeId} ${sel.trim()}`) | ||
.join(', '); | ||
return `${scopedSelector} { ${styles}`; | ||
}) | ||
.join('}'); | ||
|
||
styleTag.textContent = scopedCss; | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This breaks if we use native CSS nesting
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For example, this valid CSS:
* {
color: red;
& h1 {
color: blue;
}
}
becomes this:
#fjs-form-0w50k6a-Field_0pv8mat-style-scope * {
color: red;
& h1 }}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pushed a new version of the CSS magic, with some decent test coverage.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's the only change I actually made, the rest is just squashing / reordering some stuff.
1dc9ab8
to
34a9385
Compare
*/ | ||
export function escapeHTML(html) { | ||
return html.replace(/[&<>"'{};:]/g, match => { | ||
switch (match) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I thought we didn't use switches 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, a map's better here anyways :)
Though an if else + would be insane :D
0f76b90
to
cab8342
Compare
Instead of maintaining our own sanitation code, we can just use DOMPurify. I don't really trust our own code from being purely safe from all injections, and we're also restricting people from doing a lot of stuff in their text-fields, like styling which has been requested a few times.
I've also removed our dependency on preact-markup because I found it hard to justify, at the end of the day it was just doing dangerouslySetHtml with extra steps.
Closes #642
Closes #1004
Closes #1010
Bugs
Html component content isn't considered in getSchemaVariables