@brightspace-ui/core 2.108.0 → 2.109.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.
|
@@ -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
|
-
|
|
9
|
+
Pass the user-authored HTML into the `html` attribute of 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
|
|
@@ -14,8 +14,7 @@ Place the user-authored HTML within the `d2l-html-block` and the component will
|
|
|
14
14
|
import '@brightspace-ui/core/components/html-block/html-block.js';
|
|
15
15
|
import '@brightspace-ui/core/components/icons/icon.js';
|
|
16
16
|
</script>
|
|
17
|
-
<d2l-html-block
|
|
18
|
-
<!-- docs: start hidden content -->
|
|
17
|
+
<d2l-html-block html="
|
|
19
18
|
<style>
|
|
20
19
|
div {
|
|
21
20
|
--d2l-icon-fill-color: var(--d2l-color-cinnabar);
|
|
@@ -35,37 +34,15 @@ Place the user-authored HTML within the `d2l-html-block` and the component will
|
|
|
35
34
|
justify-content: center;
|
|
36
35
|
}
|
|
37
36
|
</style>
|
|
38
|
-
|
|
39
|
-
<d2l-icon icon
|
|
37
|
+
<div class="warning-container">
|
|
38
|
+
<d2l-icon icon="tier3:alert"></d2l-icon>
|
|
40
39
|
<span>
|
|
41
40
|
<b>Important:</b> user-authored HTML must be trusted or properly sanitized!
|
|
42
41
|
</span>
|
|
43
|
-
</div>
|
|
42
|
+
</div>">
|
|
44
43
|
</d2l-html-block>
|
|
45
44
|
```
|
|
46
45
|
|
|
47
|
-
To use `d2l-html-block` within another Lit component, use the [unsafeHTML](https://lit.dev/docs/api/directives/#unsafeHTML) directive to avoid escaping the HTML.
|
|
48
|
-
|
|
49
|
-
```html
|
|
50
|
-
<script type="module">
|
|
51
|
-
import { html, LitElement } from 'lit';
|
|
52
|
-
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
53
|
-
import '@brightspace-ui/core/components/icons/icon.js';
|
|
54
|
-
|
|
55
|
-
class SomeComponent extends LitElement {
|
|
56
|
-
render() {
|
|
57
|
-
return html`
|
|
58
|
-
<d2l-html-block>
|
|
59
|
-
${unsafeHTML(this._unsafeHTML)}
|
|
60
|
-
</d2l-html-block>`;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
customElements.define('d2l-some-component', SomeComponent);
|
|
65
|
-
</script>
|
|
66
|
-
<d2l-some-component></d2l-some-component>
|
|
67
|
-
```
|
|
68
|
-
|
|
69
46
|
### Rendering MathML and LaTeX
|
|
70
47
|
|
|
71
48
|
Examples are provided to display how user-authored math can be embedded within your webpage. Note that rendering math requires the `mathjax` context to be set correctly. For testing and/or demo pages **ONLY**, you can import `@brightspace-ui/core/tools/mathjax-test-context.js` to set this context for you.
|
|
@@ -78,8 +55,8 @@ Examples are provided to display how user-authored math can be embedded within y
|
|
|
78
55
|
import '@brightspace-ui/core/components/icons/icon.js';
|
|
79
56
|
import '@brightspace-ui/core/tools/mathjax-test-context.js';
|
|
80
57
|
</script>
|
|
81
|
-
<d2l-html-block
|
|
82
|
-
<math xmlns
|
|
58
|
+
<d2l-html-block html="
|
|
59
|
+
<math xmlns="http://www.w3.org/1998/Math/MathML">
|
|
83
60
|
<msqrt>
|
|
84
61
|
<mn>3</mn>
|
|
85
62
|
<mi>x</mi>
|
|
@@ -87,15 +64,15 @@ Examples are provided to display how user-authored math can be embedded within y
|
|
|
87
64
|
<mn>1</mn>
|
|
88
65
|
</msqrt>
|
|
89
66
|
<mo>+</mo>
|
|
90
|
-
<mo stretchy
|
|
67
|
+
<mo stretchy="false">(</mo>
|
|
91
68
|
<mn>1</mn>
|
|
92
69
|
<mo>+</mo>
|
|
93
70
|
<mi>x</mi>
|
|
94
71
|
<msup>
|
|
95
|
-
<mo stretchy
|
|
72
|
+
<mo stretchy="false">)</mo>
|
|
96
73
|
<mn>2</mn>
|
|
97
74
|
</msup>
|
|
98
|
-
</math>
|
|
75
|
+
</math>">
|
|
99
76
|
</d2l-html-block>
|
|
100
77
|
```
|
|
101
78
|
|
|
@@ -107,9 +84,7 @@ Examples are provided to display how user-authored math can be embedded within y
|
|
|
107
84
|
import '@brightspace-ui/core/components/html-block/html-block.js';
|
|
108
85
|
import '@brightspace-ui/core/tools/mathjax-test-context.js';
|
|
109
86
|
</script>
|
|
110
|
-
<d2l-html-block>
|
|
111
|
-
$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
|
|
112
|
-
</d2l-html-block>
|
|
87
|
+
<d2l-html-block html="$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$"></d2l-html-block>
|
|
113
88
|
```
|
|
114
89
|
|
|
115
90
|
### Add Context Automatically to Demos and Tests
|
|
@@ -39,9 +39,7 @@ helloGrumpy('Wizard');</code></pre>
|
|
|
39
39
|
|
|
40
40
|
<h2 class="d2l-heading-3">Inline Samples</h2>
|
|
41
41
|
|
|
42
|
-
<d2l-html-block>
|
|
43
|
-
The best type of donuts are he kind you assign in code, for example: <code class="d2l-code d2l-code-dark language-javascript">const jelly = 'donuts';</code>. The next best type of thing you can assign in code is stuff you can ferment. <code class="d2l-code d2l-code-dark language-javascript">let beer = hopsAndWater.map(ingredients => ferment(ingredients));</code>
|
|
44
|
-
</d2l-html-block>
|
|
42
|
+
<d2l-html-block html="The best type of donuts are he kind you assign in code, for example: <code class="d2l-code d2l-code-dark language-javascript">const jelly = 'donuts';lgt;/code>. The next best type of thing you can assign in code is stuff you can ferment. <code class="d2l-code d2l-code-dark language-javascript">let beer = hopsAndWater.map(ingredients => ferment(ingredients));</code>"></d2l-html-block>
|
|
45
43
|
|
|
46
44
|
</body>
|
|
47
45
|
</html>
|
|
@@ -58,28 +58,27 @@
|
|
|
58
58
|
|
|
59
59
|
<d2l-demo-snippet>
|
|
60
60
|
<template>
|
|
61
|
-
<d2l-html-block
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<div><a href="https://d2l.com">anchor</a></div>
|
|
61
|
+
<d2l-html-block html="Just a text node...
|
|
62
|
+
<h1>heading 1</h1>
|
|
63
|
+
<h2>heading 2</h2>
|
|
64
|
+
<h3>heading 3</h3>
|
|
65
|
+
<h4>heading 4</h4>
|
|
66
|
+
<h5>heading 5</h5>
|
|
67
|
+
<h6>heading 6</h6>
|
|
68
|
+
<div><strong>strong</strong></div>
|
|
69
|
+
<div><b>bold</b></div>
|
|
70
|
+
<div>text</div>
|
|
71
|
+
<pre>preformatted</pre>
|
|
72
|
+
<p>paragraph</p>
|
|
73
|
+
<ul>
|
|
74
|
+
<li>unordered item 1</li>
|
|
75
|
+
<li>unordered item 2</li>
|
|
76
|
+
</ul>
|
|
77
|
+
<ol>
|
|
78
|
+
<li>ordered item 1</li>
|
|
79
|
+
<li>ordered item 2</li>
|
|
80
|
+
</ol>
|
|
81
|
+
<div><a href="https://d2l.com">anchor</a></div>">
|
|
83
82
|
</d2l-html-block>
|
|
84
83
|
</template>
|
|
85
84
|
</d2l-demo-snippet>
|
|
@@ -88,28 +87,27 @@
|
|
|
88
87
|
|
|
89
88
|
<d2l-demo-snippet>
|
|
90
89
|
<template>
|
|
91
|
-
<d2l-html-block compact
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
<div><a href="https://d2l.com">anchor</a></div>
|
|
90
|
+
<d2l-html-block compact html="Just a text node...
|
|
91
|
+
<h1>heading 1</h1>
|
|
92
|
+
<h2>heading 2</h2>
|
|
93
|
+
<h3>heading 3</h3>
|
|
94
|
+
<h4>heading 4</h4>
|
|
95
|
+
<h5>heading 5</h5>
|
|
96
|
+
<h6>heading 6</h6>
|
|
97
|
+
<div><strong>strong</strong></div>
|
|
98
|
+
<div><b>bold</b></div>
|
|
99
|
+
<div>text</div>
|
|
100
|
+
<pre>preformatted</pre>
|
|
101
|
+
<p>paragraph</p>
|
|
102
|
+
<ul>
|
|
103
|
+
<li>unordered item 1</li>
|
|
104
|
+
<li>unordered item 2</li>
|
|
105
|
+
</ul>
|
|
106
|
+
<ol>
|
|
107
|
+
<li>ordered item 1</li>
|
|
108
|
+
<li>ordered item 2</li>
|
|
109
|
+
</ol>
|
|
110
|
+
<div><a href="https://d2l.com">anchor</a></div>">
|
|
113
111
|
</d2l-html-block>
|
|
114
112
|
</template>
|
|
115
113
|
</d2l-demo-snippet>
|
|
@@ -119,9 +117,7 @@
|
|
|
119
117
|
<d2l-demo-snippet>
|
|
120
118
|
<template>
|
|
121
119
|
<span>Here's an inline html-block:</span>
|
|
122
|
-
<d2l-html-block inline>
|
|
123
|
-
I'm inline!
|
|
124
|
-
</d2l-html-block>
|
|
120
|
+
<d2l-html-block inline html="I'm inline!"></d2l-html-block>
|
|
125
121
|
<span>Pretty cool!</span>
|
|
126
122
|
</template>
|
|
127
123
|
</d2l-demo-snippet>
|
|
@@ -142,30 +138,29 @@
|
|
|
142
138
|
|
|
143
139
|
<d2l-demo-snippet>
|
|
144
140
|
<template>
|
|
145
|
-
<d2l-html-block
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
</div>
|
|
141
|
+
<d2l-html-block html="Just a text node...
|
|
142
|
+
<div style="font-size: 42px;">
|
|
143
|
+
<h1>heading 1</h1>
|
|
144
|
+
<h2>heading 2</h2>
|
|
145
|
+
<h3>heading 3</h3>
|
|
146
|
+
<h4>heading 4</h4>
|
|
147
|
+
<h5>heading 5</h5>
|
|
148
|
+
<h6>heading 6</h6>
|
|
149
|
+
<div><strong>strong</strong></div>
|
|
150
|
+
<div><b>bold</b></div>
|
|
151
|
+
<div>text</div>
|
|
152
|
+
<pre>preformatted</pre>
|
|
153
|
+
<p>paragraph</p>
|
|
154
|
+
<ul>
|
|
155
|
+
<li>unordered item 1</li>
|
|
156
|
+
<li>unordered item 2</li>
|
|
157
|
+
</ul>
|
|
158
|
+
<ol>
|
|
159
|
+
<li>ordered item 1</li>
|
|
160
|
+
<li>ordered item 2</li>
|
|
161
|
+
</ol>
|
|
162
|
+
<div><a href="https://d2l.com">anchor</a></div>
|
|
163
|
+
<div>">
|
|
169
164
|
</d2l-html-block>
|
|
170
165
|
</template>
|
|
171
166
|
</d2l-demo-snippet>
|
|
@@ -174,120 +169,119 @@
|
|
|
174
169
|
|
|
175
170
|
<d2l-demo-snippet>
|
|
176
171
|
<template>
|
|
177
|
-
<d2l-html-block
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
</math>
|
|
172
|
+
<d2l-html-block html="<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mi>x</mi>
|
|
173
|
+
<mo>=</mo>
|
|
174
|
+
<mrow>
|
|
175
|
+
<mfrac>
|
|
176
|
+
<mrow>
|
|
177
|
+
<mo>&#x2212;</mo>
|
|
178
|
+
<mi>b</mi>
|
|
179
|
+
<mo>&#xB1;</mo>
|
|
180
|
+
<msqrt>
|
|
181
|
+
<msup>
|
|
182
|
+
<mi>b</mi>
|
|
183
|
+
<mn>2</mn>
|
|
184
|
+
</msup>
|
|
185
|
+
<mo>&#x2212;</mo>
|
|
186
|
+
<mn>4</mn>
|
|
187
|
+
<mi>a</mi>
|
|
188
|
+
<mi>c</mi>
|
|
189
|
+
</msqrt>
|
|
190
|
+
</mrow>
|
|
191
|
+
<mrow>
|
|
192
|
+
<mn>2</mn>
|
|
193
|
+
<mi>a</mi>
|
|
194
|
+
</mrow>
|
|
195
|
+
</mfrac>
|
|
196
|
+
</mrow>
|
|
197
|
+
<mtext>.</mtext>
|
|
198
|
+
<mspace linebreak="newline"></mspace>
|
|
199
|
+
<msup>
|
|
200
|
+
<mi>e</mi>
|
|
201
|
+
<mrow>
|
|
202
|
+
<mi>i</mi>
|
|
203
|
+
<mi>π<!-- π --></mi>
|
|
204
|
+
</mrow>
|
|
205
|
+
</msup>
|
|
206
|
+
<mo>+</mo>
|
|
207
|
+
<mn>1</mn>
|
|
208
|
+
<mo>=</mo>
|
|
209
|
+
<mn>0</mn>
|
|
210
|
+
</math>
|
|
211
|
+
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
|
|
212
|
+
<msup>
|
|
213
|
+
<mrow>
|
|
214
|
+
<mo>(</mo>
|
|
215
|
+
<mrow>
|
|
216
|
+
<munderover>
|
|
217
|
+
<mo>∑<!-- ∑ --></mo>
|
|
218
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
219
|
+
<mi>k</mi>
|
|
220
|
+
<mo>=</mo>
|
|
221
|
+
<mn>1</mn>
|
|
222
|
+
</mrow>
|
|
223
|
+
<mi>n</mi>
|
|
224
|
+
</munderover>
|
|
225
|
+
<msub>
|
|
226
|
+
<mi>a</mi>
|
|
227
|
+
<mi>k</mi>
|
|
228
|
+
</msub>
|
|
229
|
+
<msub>
|
|
230
|
+
<mi>b</mi>
|
|
231
|
+
<mi>k</mi>
|
|
232
|
+
</msub>
|
|
233
|
+
</mrow>
|
|
234
|
+
<mo>)</mo>
|
|
235
|
+
</mrow>
|
|
236
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
237
|
+
<mspace width="negativethinmathspace"></mspace>
|
|
238
|
+
<mspace width="negativethinmathspace"></mspace>
|
|
239
|
+
<mn>2</mn>
|
|
240
|
+
</mrow>
|
|
241
|
+
</msup>
|
|
242
|
+
<mo>≤<!-- ≤ --></mo>
|
|
243
|
+
<mrow>
|
|
244
|
+
<mo>(</mo>
|
|
245
|
+
<mrow>
|
|
246
|
+
<munderover>
|
|
247
|
+
<mo>∑<!-- ∑ --></mo>
|
|
248
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
249
|
+
<mi>k</mi>
|
|
250
|
+
<mo>=</mo>
|
|
251
|
+
<mn>1</mn>
|
|
252
|
+
</mrow>
|
|
253
|
+
<mi>n</mi>
|
|
254
|
+
</munderover>
|
|
255
|
+
<msubsup>
|
|
256
|
+
<mi>a</mi>
|
|
257
|
+
<mi>k</mi>
|
|
258
|
+
<mn>2</mn>
|
|
259
|
+
</msubsup>
|
|
260
|
+
</mrow>
|
|
261
|
+
<mo>)</mo>
|
|
262
|
+
</mrow>
|
|
263
|
+
<mrow>
|
|
264
|
+
<mo>(</mo>
|
|
265
|
+
<mrow>
|
|
266
|
+
<munderover>
|
|
267
|
+
<mo>∑<!-- ∑ --></mo>
|
|
268
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
269
|
+
<mi>k</mi>
|
|
270
|
+
<mo>=</mo>
|
|
271
|
+
<mn>1</mn>
|
|
272
|
+
</mrow>
|
|
273
|
+
<mi>n</mi>
|
|
274
|
+
</munderover>
|
|
275
|
+
<msubsup>
|
|
276
|
+
<mi>b</mi>
|
|
277
|
+
<mi>k</mi>
|
|
278
|
+
<mn>2</mn>
|
|
279
|
+
</msubsup>
|
|
280
|
+
</mrow>
|
|
281
|
+
<mo>)</mo>
|
|
282
|
+
</mrow>
|
|
283
|
+
</math>
|
|
284
|
+
<div>$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$</div>">
|
|
291
285
|
</d2l-html-block>
|
|
292
286
|
</template>
|
|
293
287
|
</d2l-demo-snippet>
|
|
@@ -410,178 +404,32 @@
|
|
|
410
404
|
|
|
411
405
|
<d2l-demo-snippet>
|
|
412
406
|
<template>
|
|
413
|
-
<d2l-html-block
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
<math xmlns="http://www.w3.org/1998/Math/MathML">
|
|
433
|
-
<msup>
|
|
434
|
-
<mrow>
|
|
435
|
-
<mo>(</mo>
|
|
436
|
-
<mrow>
|
|
437
|
-
<munderover>
|
|
438
|
-
<mo>∑<!-- ∑ --></mo>
|
|
439
|
-
<mrow class="MJX-TeXAtom-ORD">
|
|
440
|
-
<mi>k</mi>
|
|
441
|
-
<mo>=</mo>
|
|
442
|
-
<mn>1</mn>
|
|
443
|
-
</mrow>
|
|
444
|
-
<mi>n</mi>
|
|
445
|
-
</munderover>
|
|
446
|
-
<msub>
|
|
447
|
-
<mi>a</mi>
|
|
448
|
-
<mi>k</mi>
|
|
449
|
-
</msub>
|
|
450
|
-
<msub>
|
|
451
|
-
<mi>b</mi>
|
|
452
|
-
<mi>k</mi>
|
|
453
|
-
</msub>
|
|
454
|
-
</mrow>
|
|
455
|
-
<mo>)</mo>
|
|
456
|
-
</mrow>
|
|
457
|
-
<mrow class="MJX-TeXAtom-ORD">
|
|
458
|
-
<mspace width="negativethinmathspace"></mspace>
|
|
459
|
-
<mspace width="negativethinmathspace"></mspace>
|
|
460
|
-
<mn>2</mn>
|
|
461
|
-
</mrow>
|
|
462
|
-
</msup>
|
|
463
|
-
<mo>≤<!-- ≤ --></mo>
|
|
464
|
-
<mrow>
|
|
465
|
-
<mo>(</mo>
|
|
466
|
-
<mrow>
|
|
467
|
-
<munderover>
|
|
468
|
-
<mo>∑<!-- ∑ --></mo>
|
|
469
|
-
<mrow class="MJX-TeXAtom-ORD">
|
|
470
|
-
<mi>k</mi>
|
|
471
|
-
<mo>=</mo>
|
|
472
|
-
<mn>1</mn>
|
|
473
|
-
</mrow>
|
|
474
|
-
<mi>n</mi>
|
|
475
|
-
</munderover>
|
|
476
|
-
<msubsup>
|
|
477
|
-
<mi>a</mi>
|
|
478
|
-
<mi>k</mi>
|
|
479
|
-
<mn>2</mn>
|
|
480
|
-
</msubsup>
|
|
481
|
-
</mrow>
|
|
482
|
-
<mo>)</mo>
|
|
483
|
-
</mrow>
|
|
484
|
-
<mrow>
|
|
485
|
-
<mo>(</mo>
|
|
486
|
-
<mrow>
|
|
487
|
-
<munderover>
|
|
488
|
-
<mo>∑<!-- ∑ --></mo>
|
|
489
|
-
<mrow class="MJX-TeXAtom-ORD">
|
|
490
|
-
<mi>k</mi>
|
|
491
|
-
<mo>=</mo>
|
|
492
|
-
<mn>1</mn>
|
|
493
|
-
</mrow>
|
|
494
|
-
<mi>n</mi>
|
|
495
|
-
</munderover>
|
|
496
|
-
<msubsup>
|
|
497
|
-
<mi>b</mi>
|
|
498
|
-
<mi>k</mi>
|
|
499
|
-
<mn>2</mn>
|
|
500
|
-
</msubsup>
|
|
501
|
-
</mrow>
|
|
502
|
-
<mo>)</mo>
|
|
503
|
-
</mrow>
|
|
504
|
-
</math> and other symbols.
|
|
505
|
-
</d2l-html-block>
|
|
506
|
-
</template>
|
|
507
|
-
</d2l-demo-snippet>
|
|
508
|
-
|
|
509
|
-
<h2>HTML Block (LaTeX math)</h2>
|
|
510
|
-
|
|
511
|
-
<d2l-demo-snippet>
|
|
512
|
-
<template>
|
|
513
|
-
<d2l-html-block>
|
|
514
|
-
<div>$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</div>
|
|
515
|
-
<div>$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$</div>
|
|
516
|
-
</d2l-html-block>
|
|
517
|
-
</template>
|
|
518
|
-
</d2l-demo-snippet>
|
|
519
|
-
|
|
520
|
-
<h2>HTML Block (LaTeX inline math)</h2>
|
|
521
|
-
|
|
522
|
-
<d2l-demo-snippet>
|
|
523
|
-
<template>
|
|
524
|
-
<d2l-html-block>
|
|
525
|
-
<div>
|
|
526
|
-
An equation rendered using LaTeX...
|
|
527
|
-
\( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
|
|
528
|
-
... and some text ...
|
|
529
|
-
</div>
|
|
530
|
-
</d2l-html-block>
|
|
531
|
-
</template>
|
|
532
|
-
</d2l-demo-snippet>
|
|
533
|
-
|
|
534
|
-
<h2>HTML Block (html prop)</h2>
|
|
535
|
-
|
|
536
|
-
<d2l-demo-snippet>
|
|
537
|
-
<template>
|
|
538
|
-
<d2l-html-block html="<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mi>x</mi>
|
|
539
|
-
<mo>=</mo>
|
|
540
|
-
<mrow>
|
|
541
|
-
<mfrac>
|
|
542
|
-
<mrow>
|
|
543
|
-
<mo>&#x2212;</mo>
|
|
544
|
-
<mi>b</mi>
|
|
545
|
-
<mo>&#xB1;</mo>
|
|
546
|
-
<msqrt>
|
|
547
|
-
<msup>
|
|
548
|
-
<mi>b</mi>
|
|
549
|
-
<mn>2</mn>
|
|
550
|
-
</msup>
|
|
551
|
-
<mo>&#x2212;</mo>
|
|
552
|
-
<mn>4</mn>
|
|
553
|
-
<mi>a</mi>
|
|
554
|
-
<mi>c</mi>
|
|
555
|
-
</msqrt>
|
|
556
|
-
</mrow>
|
|
557
|
-
<mrow>
|
|
558
|
-
<mn>2</mn>
|
|
559
|
-
<mi>a</mi>
|
|
560
|
-
</mrow>
|
|
561
|
-
</mfrac>
|
|
562
|
-
</mrow>
|
|
563
|
-
<mtext>.</mtext>
|
|
564
|
-
<mspace linebreak="newline"></mspace>
|
|
565
|
-
<msup>
|
|
566
|
-
<mi>e</mi>
|
|
567
|
-
<mrow>
|
|
568
|
-
<mi>i</mi>
|
|
569
|
-
<mi>π<!-- π --></mi>
|
|
570
|
-
</mrow>
|
|
571
|
-
</msup>
|
|
572
|
-
<mo>+</mo>
|
|
573
|
-
<mn>1</mn>
|
|
574
|
-
<mo>=</mo>
|
|
575
|
-
<mn>0</mn>
|
|
576
|
-
</math>
|
|
577
|
-
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
|
|
407
|
+
<d2l-html-block html="An equation...
|
|
408
|
+
<math xmlns="http://www.w3.org/1998/Math/MathML">
|
|
409
|
+
<msqrt>
|
|
410
|
+
<mn>3</mn>
|
|
411
|
+
<mi>x</mi>
|
|
412
|
+
<mo>−</mo>
|
|
413
|
+
<mn>1</mn>
|
|
414
|
+
</msqrt>
|
|
415
|
+
<mo>+</mo>
|
|
416
|
+
<mo stretchy="false">(</mo>
|
|
417
|
+
<mn>1</mn>
|
|
418
|
+
<mo>+</mo>
|
|
419
|
+
<mi>x</mi>
|
|
420
|
+
<msup>
|
|
421
|
+
<mo stretchy="false">)</mo>
|
|
422
|
+
<mn>2</mn>
|
|
423
|
+
</msup>
|
|
424
|
+
</math> embedded inline with text... and showing placement of indicies for summations
|
|
425
|
+
<math xmlns="http://www.w3.org/1998/Math/MathML">
|
|
578
426
|
<msup>
|
|
579
427
|
<mrow>
|
|
580
428
|
<mo>(</mo>
|
|
581
429
|
<mrow>
|
|
582
430
|
<munderover>
|
|
583
431
|
<mo>∑<!-- ∑ --></mo>
|
|
584
|
-
<mrow class
|
|
432
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
585
433
|
<mi>k</mi>
|
|
586
434
|
<mo>=</mo>
|
|
587
435
|
<mn>1</mn>
|
|
@@ -599,9 +447,9 @@
|
|
|
599
447
|
</mrow>
|
|
600
448
|
<mo>)</mo>
|
|
601
449
|
</mrow>
|
|
602
|
-
<mrow class
|
|
603
|
-
<mspace width
|
|
604
|
-
<mspace width
|
|
450
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
451
|
+
<mspace width="negativethinmathspace"></mspace>
|
|
452
|
+
<mspace width="negativethinmathspace"></mspace>
|
|
605
453
|
<mn>2</mn>
|
|
606
454
|
</mrow>
|
|
607
455
|
</msup>
|
|
@@ -611,7 +459,7 @@
|
|
|
611
459
|
<mrow>
|
|
612
460
|
<munderover>
|
|
613
461
|
<mo>∑<!-- ∑ --></mo>
|
|
614
|
-
<mrow class
|
|
462
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
615
463
|
<mi>k</mi>
|
|
616
464
|
<mo>=</mo>
|
|
617
465
|
<mn>1</mn>
|
|
@@ -631,7 +479,7 @@
|
|
|
631
479
|
<mrow>
|
|
632
480
|
<munderover>
|
|
633
481
|
<mo>∑<!-- ∑ --></mo>
|
|
634
|
-
<mrow class
|
|
482
|
+
<mrow class="MJX-TeXAtom-ORD">
|
|
635
483
|
<mi>k</mi>
|
|
636
484
|
<mo>=</mo>
|
|
637
485
|
<mn>1</mn>
|
|
@@ -646,9 +494,39 @@
|
|
|
646
494
|
</mrow>
|
|
647
495
|
<mo>)</mo>
|
|
648
496
|
</mrow>
|
|
649
|
-
</math>
|
|
650
|
-
|
|
651
|
-
|
|
497
|
+
</math> and other symbols.">
|
|
498
|
+
</d2l-html-block>
|
|
499
|
+
</template>
|
|
500
|
+
</d2l-demo-snippet>
|
|
501
|
+
|
|
502
|
+
<h2>HTML Block (LaTeX math)</h2>
|
|
503
|
+
|
|
504
|
+
<d2l-demo-snippet>
|
|
505
|
+
<template>
|
|
506
|
+
<d2l-html-block html="<div>$$ f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x $$ $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</div>
|
|
507
|
+
<div>$$ {\color{red}x} + {\color{blue}y} = {\color{green}z} $$</div>">
|
|
508
|
+
</d2l-html-block>
|
|
509
|
+
</template>
|
|
510
|
+
</d2l-demo-snippet>
|
|
511
|
+
|
|
512
|
+
<h2>HTML Block (LaTeX inline math)</h2>
|
|
513
|
+
|
|
514
|
+
<d2l-demo-snippet>
|
|
515
|
+
<template>
|
|
516
|
+
<d2l-html-block html="<div>
|
|
517
|
+
An equation rendered using LaTeX...
|
|
518
|
+
\( f(x) = \int \mathrm{e}^{-x}\,\mathrm{d}x \)
|
|
519
|
+
... and some text ...
|
|
520
|
+
</div>">
|
|
521
|
+
</d2l-html-block>
|
|
522
|
+
</template>
|
|
523
|
+
</d2l-demo-snippet>
|
|
524
|
+
|
|
525
|
+
<h2>HTML Block (code)</h2>
|
|
526
|
+
|
|
527
|
+
<d2l-demo-snippet>
|
|
528
|
+
<template>
|
|
529
|
+
<d2l-html-block html="<pre class="d2l-code d2l-code-dark"><code class="language-javascript">function helloGrumpy(name) {
|
|
652
530
|
console.log(`Hi there ${name}.`);
|
|
653
531
|
}
|
|
654
532
|
helloGrumpy('Wizard');</code></pre>">
|
|
@@ -665,7 +543,6 @@ helloGrumpy('Wizard');</code></pre>">
|
|
|
665
543
|
</d2l-demo-snippet>
|
|
666
544
|
|
|
667
545
|
<d2l-code-view language="javascript">
|
|
668
|
-
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
669
546
|
import { html, LitElement } from 'lit';
|
|
670
547
|
|
|
671
548
|
class SomeComponent extends LitElement {
|
|
@@ -687,7 +564,6 @@ helloGrumpy('Wizard');</code></pre>">
|
|
|
687
564
|
|
|
688
565
|
<script type="module">
|
|
689
566
|
import { html, LitElement } from 'lit';
|
|
690
|
-
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
691
567
|
|
|
692
568
|
class SomeComponent extends LitElement {
|
|
693
569
|
|
|
@@ -806,9 +682,7 @@ helloGrumpy('Wizard');</code></pre>">
|
|
|
806
682
|
|
|
807
683
|
render() {
|
|
808
684
|
return html`
|
|
809
|
-
<d2l-html-block>
|
|
810
|
-
${unsafeHTML(this._htmlSnippets[this._updateCount])}
|
|
811
|
-
</d2l-html-block>
|
|
685
|
+
<d2l-html-block html="${this._htmlSnippets[this._updateCount]}"></d2l-html-block>
|
|
812
686
|
<button @click="${this._updateTemplateContent}" ?disabled="${this._updateCount === 6}">update content</button>`;
|
|
813
687
|
}
|
|
814
688
|
|
|
@@ -134,7 +134,6 @@ const getRenderers = async() => {
|
|
|
134
134
|
|
|
135
135
|
/**
|
|
136
136
|
* A component for displaying user-authored HTML.
|
|
137
|
-
* @slot - Provide your user-authored HTML
|
|
138
137
|
*/
|
|
139
138
|
class HtmlBlock extends LitElement {
|
|
140
139
|
|
|
@@ -194,7 +193,6 @@ class HtmlBlock extends LitElement {
|
|
|
194
193
|
this.html = '';
|
|
195
194
|
this.inline = false;
|
|
196
195
|
this.noDeferredRendering = false;
|
|
197
|
-
this._hasSlottedContent = false;
|
|
198
196
|
|
|
199
197
|
this._contextObserverControllerResolve = undefined;
|
|
200
198
|
this._contextObserverControllerInitialized = new Promise(resolve => {
|
|
@@ -210,33 +208,14 @@ class HtmlBlock extends LitElement {
|
|
|
210
208
|
});
|
|
211
209
|
}
|
|
212
210
|
|
|
213
|
-
connectedCallback() {
|
|
214
|
-
super.connectedCallback();
|
|
215
|
-
|
|
216
|
-
if (!this._contentObserver || this.noDeferredRendering) return;
|
|
217
|
-
|
|
218
|
-
const slot = this.shadowRoot.querySelector('slot');
|
|
219
|
-
if (slot) {
|
|
220
|
-
const slottedNodes = slot.assignedNodes({ flatten: true });
|
|
221
|
-
this._hasSlottedContent = this._hasSlottedElements(slottedNodes);
|
|
222
|
-
|
|
223
|
-
slottedNodes.forEach(
|
|
224
|
-
node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
|
|
225
|
-
);
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
disconnectedCallback() {
|
|
230
|
-
super.disconnectedCallback();
|
|
231
|
-
if (this._contentObserver) this._contentObserver.disconnect();
|
|
232
|
-
}
|
|
233
|
-
|
|
234
211
|
firstUpdated(changedProperties) {
|
|
235
212
|
super.firstUpdated(changedProperties);
|
|
236
213
|
this._updateContextKeys();
|
|
237
214
|
}
|
|
238
215
|
|
|
239
216
|
render() {
|
|
217
|
+
this._validateHtml();
|
|
218
|
+
|
|
240
219
|
const renderContainerClasses = {
|
|
241
220
|
'd2l-html-block-rendered': true,
|
|
242
221
|
'd2l-html-block-compact': this.compact
|
|
@@ -244,17 +223,17 @@ class HtmlBlock extends LitElement {
|
|
|
244
223
|
|
|
245
224
|
return html`
|
|
246
225
|
<div class="${classMap(renderContainerClasses)}"></div>
|
|
247
|
-
|
|
226
|
+
${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
|
|
248
227
|
`;
|
|
249
228
|
}
|
|
250
229
|
|
|
251
230
|
async updated(changedProperties) {
|
|
252
231
|
super.updated(changedProperties);
|
|
253
|
-
if (changedProperties.has('html') && this.html !== undefined && this.html !== null && !this.
|
|
232
|
+
if (changedProperties.has('html') && this.html !== undefined && this.html !== null && !this.noDeferredRendering) {
|
|
254
233
|
await this._updateRenderContainer();
|
|
255
234
|
}
|
|
256
235
|
if (await this._contextChanged()) {
|
|
257
|
-
if (this.
|
|
236
|
+
if (this.noDeferredRendering) this._renderInline();
|
|
258
237
|
else if (this.html !== undefined && this.html !== null) {
|
|
259
238
|
await this._updateRenderContainer();
|
|
260
239
|
}
|
|
@@ -279,22 +258,8 @@ class HtmlBlock extends LitElement {
|
|
|
279
258
|
}
|
|
280
259
|
|
|
281
260
|
async _handleSlotChange(e) {
|
|
282
|
-
if (!e.target || !this.shadowRoot) return;
|
|
283
|
-
|
|
284
|
-
const slottedNodes = slot.assignedNodes({ flatten: true });
|
|
285
|
-
|
|
286
|
-
if (!this.html && this._hasSlottedElements(slottedNodes)) {
|
|
287
|
-
this._hasSlottedContent = true;
|
|
288
|
-
await this._render(e.target);
|
|
289
|
-
} else {
|
|
290
|
-
this._hasSlottedContent = false;
|
|
291
|
-
}
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
_hasSlottedElements(slottedNodes) {
|
|
295
|
-
if (!slottedNodes || slottedNodes.length === 0) return false;
|
|
296
|
-
if (slottedNodes.filter(node => node.nodeType === Node.ELEMENT_NODE || node.textContent).length === 0) return false;
|
|
297
|
-
return true;
|
|
261
|
+
if (!e.target || !this.shadowRoot || !this.noDeferredRendering) return;
|
|
262
|
+
await this._renderInline(e.target);
|
|
298
263
|
}
|
|
299
264
|
|
|
300
265
|
async _processRenderers(elem) {
|
|
@@ -316,11 +281,6 @@ class HtmlBlock extends LitElement {
|
|
|
316
281
|
}
|
|
317
282
|
}
|
|
318
283
|
|
|
319
|
-
async _render(slot) {
|
|
320
|
-
if (this.noDeferredRendering) await this._renderInline(slot);
|
|
321
|
-
else this._stamp(slot);
|
|
322
|
-
}
|
|
323
|
-
|
|
324
284
|
async _renderInline(slot) {
|
|
325
285
|
if (!this.shadowRoot) return;
|
|
326
286
|
if (!slot) slot = this.shadowRoot.querySelector('slot');
|
|
@@ -332,32 +292,6 @@ class HtmlBlock extends LitElement {
|
|
|
332
292
|
await this._processRenderers(noDeferredRenderingContainer);
|
|
333
293
|
}
|
|
334
294
|
|
|
335
|
-
_stamp(slot) {
|
|
336
|
-
const renderContainer = this.shadowRoot.querySelector('.d2l-html-block-rendered');
|
|
337
|
-
|
|
338
|
-
const stampHTML = async nodes => {
|
|
339
|
-
renderContainer.innerHTML = '';
|
|
340
|
-
if (!nodes || nodes.length === 0) return;
|
|
341
|
-
|
|
342
|
-
// Nodes must be cloned into the render container before processing, as
|
|
343
|
-
// some renderers require connected nodes (e.g. MathJax).
|
|
344
|
-
nodes.forEach(node => renderContainer.appendChild(node.cloneNode(true)));
|
|
345
|
-
await this._processRenderers(renderContainer);
|
|
346
|
-
};
|
|
347
|
-
|
|
348
|
-
if (this._contentObserver) this._contentObserver.disconnect();
|
|
349
|
-
|
|
350
|
-
if (!slot) slot = this.shadowRoot.querySelector('slot');
|
|
351
|
-
const slottedNodes = slot.assignedNodes({ flatten: true });
|
|
352
|
-
|
|
353
|
-
this._contentObserver = new MutationObserver(() => stampHTML(slottedNodes));
|
|
354
|
-
slottedNodes.forEach(
|
|
355
|
-
node => this._contentObserver.observe(node, { attributes: true, childList: true, subtree: true })
|
|
356
|
-
);
|
|
357
|
-
|
|
358
|
-
stampHTML(slottedNodes);
|
|
359
|
-
}
|
|
360
|
-
|
|
361
295
|
_updateContextKeys() {
|
|
362
296
|
if (!this._contextObserverController) return;
|
|
363
297
|
if (!this._contextKeys) this._contextKeys = new Map();
|
|
@@ -373,6 +307,17 @@ class HtmlBlock extends LitElement {
|
|
|
373
307
|
await this._processRenderers(renderContainer);
|
|
374
308
|
}
|
|
375
309
|
|
|
310
|
+
_validateHtml() {
|
|
311
|
+
if (this._validatingHtmlTimeout) clearTimeout(this._validatingHtmlTimeout);
|
|
312
|
+
|
|
313
|
+
this._validatingHtmlTimeout = setTimeout(() => {
|
|
314
|
+
this._validatingHtmlTimeout = undefined;
|
|
315
|
+
if (this.html && this.noDeferredRendering) {
|
|
316
|
+
throw new Error('<d2l-html-block>: "html" attribute is not supported with "no-deferred-rendering".');
|
|
317
|
+
}
|
|
318
|
+
}, 3000);
|
|
319
|
+
}
|
|
320
|
+
|
|
376
321
|
}
|
|
377
322
|
|
|
378
323
|
customElements.define('d2l-html-block', HtmlBlock);
|
package/custom-elements.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.109.0",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|