@brightspace-ui/core 1.219.5 → 1.220.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/html-block/README.md +48 -54
- package/components/html-block/demo/html-block-template.html +634 -0
- package/components/html-block/demo/html-block.html +213 -223
- package/components/html-block/html-block.js +31 -15
- package/custom-elements.json +1 -1
- package/helpers/mathjax.js +11 -3
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ Components to assist with displaying user-authored HTML within your webpage.
|
|
|
6
6
|
|
|
7
7
|
The `d2l-html-block` element is a web component for displaying user-authored HTML. It includes styles for headings, lists, anchors and other elements. In addition, it provides integration with MathJax for rendering MathML.
|
|
8
8
|
|
|
9
|
-
Place the user-authored HTML within
|
|
9
|
+
Place the user-authored HTML within the `d2l-html-block` and the component will stamp the content into its local DOM where styles will be applied, and math typeset.
|
|
10
10
|
|
|
11
11
|
<!-- docs: demo live name:d2l-html-block autoSize:false size:small -->
|
|
12
12
|
```html
|
|
@@ -15,34 +15,32 @@ Place the user-authored HTML within a `template` and the `d2l-html-block` will s
|
|
|
15
15
|
import '@brightspace-ui/core/components/icons/icon.js';
|
|
16
16
|
</script>
|
|
17
17
|
<d2l-html-block>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
</style>
|
|
18
|
+
<!-- docs: start hidden content -->
|
|
19
|
+
<style>
|
|
20
|
+
div {
|
|
21
|
+
--d2l-icon-fill-color: var(--d2l-color-cinnabar);
|
|
22
|
+
}
|
|
23
|
+
span {
|
|
24
|
+
color: var(--d2l-color-cinnabar);
|
|
25
|
+
margin-left: 10px;
|
|
26
|
+
vertical-align: middle;
|
|
27
|
+
}
|
|
28
|
+
d2l-icon {
|
|
29
|
+
align-self: center;
|
|
30
|
+
flex-shrink: 0;
|
|
31
|
+
}
|
|
32
|
+
.warning-container {
|
|
33
|
+
align-items: center;
|
|
34
|
+
display: flex;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
}
|
|
37
|
+
</style>
|
|
39
38
|
<!-- docs: end hidden content --><div class="warning-container">
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</template>
|
|
39
|
+
<d2l-icon icon="tier3:alert"></d2l-icon>
|
|
40
|
+
<span>
|
|
41
|
+
<b>Important:</b> user-authored HTML must be trusted or properly sanitized!
|
|
42
|
+
</span>
|
|
43
|
+
</div>
|
|
46
44
|
</d2l-html-block>
|
|
47
45
|
```
|
|
48
46
|
|
|
@@ -58,7 +56,7 @@ To use `d2l-html-block` within another Lit component, use the [unsafeHTML](https
|
|
|
58
56
|
render() {
|
|
59
57
|
return html`
|
|
60
58
|
<d2l-html-block>
|
|
61
|
-
|
|
59
|
+
${unsafeHTML(this._unsafeHTML)}
|
|
62
60
|
</d2l-html-block>`;
|
|
63
61
|
}
|
|
64
62
|
}
|
|
@@ -79,27 +77,25 @@ Examples are provided to display how user-authored math can be embedded within y
|
|
|
79
77
|
import '@brightspace-ui/core/components/icons/icon.js';
|
|
80
78
|
</script>
|
|
81
79
|
<d2l-html-block>
|
|
82
|
-
<
|
|
83
|
-
<
|
|
84
|
-
<
|
|
85
|
-
<
|
|
86
|
-
<mn>3</mn>
|
|
87
|
-
<mi>x</mi>
|
|
88
|
-
<mo>−</mo>
|
|
89
|
-
<mn>1</mn>
|
|
90
|
-
</msqrt>
|
|
91
|
-
<mo>+</mo>
|
|
92
|
-
<mo stretchy="false">(</mo>
|
|
93
|
-
<mn>1</mn>
|
|
94
|
-
<mo>+</mo>
|
|
80
|
+
<div class="mathml-container">
|
|
81
|
+
<math xmlns="http://www.w3.org/1998/Math/MathML">
|
|
82
|
+
<msqrt>
|
|
83
|
+
<mn>3</mn>
|
|
95
84
|
<mi>x</mi>
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
</
|
|
101
|
-
|
|
102
|
-
|
|
85
|
+
<mo>−</mo>
|
|
86
|
+
<mn>1</mn>
|
|
87
|
+
</msqrt>
|
|
88
|
+
<mo>+</mo>
|
|
89
|
+
<mo stretchy="false">(</mo>
|
|
90
|
+
<mn>1</mn>
|
|
91
|
+
<mo>+</mo>
|
|
92
|
+
<mi>x</mi>
|
|
93
|
+
<msup>
|
|
94
|
+
<mo stretchy="false">)</mo>
|
|
95
|
+
<mn>2</mn>
|
|
96
|
+
</msup>
|
|
97
|
+
</math>
|
|
98
|
+
</div>
|
|
103
99
|
</d2l-html-block>
|
|
104
100
|
```
|
|
105
101
|
|
|
@@ -124,10 +120,8 @@ Examples are provided to display how user-authored math can be embedded within y
|
|
|
124
120
|
document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({ renderLatex: true });<!-- docs: end hidden content -->
|
|
125
121
|
</script>
|
|
126
122
|
<d2l-html-block>
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
</div>
|
|
131
|
-
</template>
|
|
123
|
+
<div class="latex-container">
|
|
124
|
+
$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
|
|
125
|
+
</div>
|
|
132
126
|
</d2l-html-block>
|
|
133
127
|
```
|