@brightspace-ui/core 3.258.0 → 3.259.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/html-block.js +162 -110
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
|
|
3
|
-
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { css, html, LitElement, unsafeCSS } from 'lit';
|
|
4
|
+
import { _isValidCssSelector } from '../../helpers/internal/css.js';
|
|
4
5
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
6
|
import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
|
|
6
7
|
import { getFocusRingStyles } from '../../helpers/focus.js';
|
|
@@ -9,121 +10,175 @@ import { renderEmbeds } from '../../helpers/embeds.js';
|
|
|
9
10
|
import { requestInstance } from '../../mixins/provider/provider-mixin.js';
|
|
10
11
|
import { tryGet } from '@brightspace-ui/lms-context-provider/client.js';
|
|
11
12
|
|
|
13
|
+
/**
|
|
14
|
+
* A private helper method that should not be used by general consumers
|
|
15
|
+
*/
|
|
16
|
+
export const _generateHtmlBlockContainerStyles = (selector) => {
|
|
17
|
+
if (!_isValidCssSelector(selector)) return;
|
|
18
|
+
|
|
19
|
+
selector = unsafeCSS(selector);
|
|
20
|
+
return css`
|
|
21
|
+
${selector} {
|
|
22
|
+
line-height: 1.47; /* 1.4rem / 0.95rem */
|
|
23
|
+
}
|
|
24
|
+
${selector} > :first-child {
|
|
25
|
+
margin-top: 0;
|
|
26
|
+
}
|
|
27
|
+
${selector} > :last-child {
|
|
28
|
+
margin-bottom: 0;
|
|
29
|
+
}
|
|
30
|
+
`;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* A private helper method that should not be used by general consumers
|
|
35
|
+
*/
|
|
36
|
+
export const _generateHtmlBlockRootStyles = (selector) => {
|
|
37
|
+
if (!_isValidCssSelector(selector)) return;
|
|
38
|
+
|
|
39
|
+
selector = unsafeCSS(selector);
|
|
40
|
+
return css`
|
|
41
|
+
${selector} {
|
|
42
|
+
overflow-wrap: break-word;
|
|
43
|
+
overflow-x: auto;
|
|
44
|
+
overflow-y: hidden;
|
|
45
|
+
text-align: start;
|
|
46
|
+
}
|
|
47
|
+
`;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* A private helper method that should not be used by general consumers
|
|
52
|
+
*/
|
|
53
|
+
export const _generateHtmlBlockContentStyles = (selector) => {
|
|
54
|
+
if (!selector) selector = '';
|
|
55
|
+
else if (!_isValidCssSelector(selector)) return;
|
|
56
|
+
|
|
57
|
+
selector = unsafeCSS(selector);
|
|
58
|
+
return css`
|
|
59
|
+
${selector} h1,
|
|
60
|
+
${selector} h2,
|
|
61
|
+
${selector} h3,
|
|
62
|
+
${selector} h4,
|
|
63
|
+
${selector} h5,
|
|
64
|
+
${selector} h6,
|
|
65
|
+
${selector} b,
|
|
66
|
+
${selector} strong,
|
|
67
|
+
${selector} b *,
|
|
68
|
+
${selector} strong * {
|
|
69
|
+
font-weight: bold;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
${selector} h1 {
|
|
73
|
+
font-size: 2em;
|
|
74
|
+
line-height: 1;
|
|
75
|
+
margin: 21px 0;
|
|
76
|
+
}
|
|
77
|
+
${selector} h2 {
|
|
78
|
+
font-size: 1.5em;
|
|
79
|
+
line-height: 1;
|
|
80
|
+
margin: 20px 0;
|
|
81
|
+
}
|
|
82
|
+
${selector} h3 {
|
|
83
|
+
font-size: 1.2em;
|
|
84
|
+
line-height: 1;
|
|
85
|
+
margin: 19px 0;
|
|
86
|
+
}
|
|
87
|
+
${selector} h4 {
|
|
88
|
+
font-size: 1em;
|
|
89
|
+
line-height: 1.05;
|
|
90
|
+
margin: 21px 0;
|
|
91
|
+
}
|
|
92
|
+
${selector} h5 {
|
|
93
|
+
font-size: 0.83em;
|
|
94
|
+
line-height: 1;
|
|
95
|
+
margin: 22px 0;
|
|
96
|
+
}
|
|
97
|
+
${selector} h6 {
|
|
98
|
+
font-size: 0.67em;
|
|
99
|
+
line-height: 1;
|
|
100
|
+
margin: 25px 0;
|
|
101
|
+
}
|
|
102
|
+
${selector} pre {
|
|
103
|
+
font-family: Monospace;
|
|
104
|
+
font-size: 13px;
|
|
105
|
+
margin: 13px 0;
|
|
106
|
+
}
|
|
107
|
+
${selector} p {
|
|
108
|
+
margin: 0.5em 0 1em 0;
|
|
109
|
+
}
|
|
110
|
+
${selector} ul,
|
|
111
|
+
${selector} ol {
|
|
112
|
+
list-style-position: outside;
|
|
113
|
+
margin: 1em 0;
|
|
114
|
+
padding-inline-start: 3em;
|
|
115
|
+
}
|
|
116
|
+
${selector} ul,
|
|
117
|
+
${selector} ul[type="disc"] {
|
|
118
|
+
list-style-type: disc;
|
|
119
|
+
}
|
|
120
|
+
${selector} ul ul,
|
|
121
|
+
${selector} ul ol,
|
|
122
|
+
${selector} ol ul,
|
|
123
|
+
${selector} ol ol {
|
|
124
|
+
margin-bottom: 0;
|
|
125
|
+
margin-top: 0;
|
|
126
|
+
}
|
|
127
|
+
${selector} ul ul,
|
|
128
|
+
${selector} ol ul,
|
|
129
|
+
${selector} ul[type="circle"] {
|
|
130
|
+
list-style-type: circle;
|
|
131
|
+
}
|
|
132
|
+
${selector} ul ul ul,
|
|
133
|
+
${selector} ul ol ul,
|
|
134
|
+
${selector} ol ul ul,
|
|
135
|
+
${selector} ol ol ul,
|
|
136
|
+
${selector} ul[type="square"] {
|
|
137
|
+
list-style-type: square;
|
|
138
|
+
}
|
|
139
|
+
${selector} a,
|
|
140
|
+
${selector} a:visited,
|
|
141
|
+
${selector} a:link,
|
|
142
|
+
${selector} a:active {
|
|
143
|
+
color: var(--d2l-color-celestine, #006fbf);
|
|
144
|
+
cursor: pointer;
|
|
145
|
+
text-decoration: none;
|
|
146
|
+
}
|
|
147
|
+
${selector} a:hover {
|
|
148
|
+
color: var(--d2l-color-celestine-minus-1, #004489);
|
|
149
|
+
text-decoration: underline;
|
|
150
|
+
}
|
|
151
|
+
${selector} a {
|
|
152
|
+
--d2l-focus-ring-offset: 1px;
|
|
153
|
+
--d2l-focus-ring-color: var(--d2l-color-celestine, #006fbf);
|
|
154
|
+
}
|
|
155
|
+
${getFocusRingStyles(`${selector} a`, { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
|
|
156
|
+
@media print {
|
|
157
|
+
${selector} a,
|
|
158
|
+
${selector} a:visited,
|
|
159
|
+
${selector} a:link,
|
|
160
|
+
${selector} a:active {
|
|
161
|
+
color: var(--d2l-color-ferrite, #202122);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
${selector} mjx-assistive-mml math {
|
|
165
|
+
position: absolute;
|
|
166
|
+
}
|
|
167
|
+
`;
|
|
168
|
+
};
|
|
169
|
+
|
|
12
170
|
export const htmlBlockContentStyles = css`
|
|
13
|
-
.d2l-html-block-rendered
|
|
14
|
-
line-height: 1.47; /* 1.4rem / 0.95rem */
|
|
15
|
-
}
|
|
16
|
-
.d2l-html-block-rendered > :first-child {
|
|
17
|
-
margin-top: 0;
|
|
18
|
-
}
|
|
19
|
-
.d2l-html-block-rendered > :last-child {
|
|
20
|
-
margin-bottom: 0;
|
|
21
|
-
}
|
|
171
|
+
${_generateHtmlBlockContainerStyles('.d2l-html-block-rendered')}
|
|
22
172
|
.d2l-html-block-compact {
|
|
23
173
|
font-size: 0.8rem;
|
|
24
174
|
font-weight: 400;
|
|
25
175
|
line-height: 1.5; /* 1.2rem / 0.8rem */
|
|
26
176
|
}
|
|
27
|
-
|
|
28
|
-
font-weight: bold;
|
|
29
|
-
}
|
|
30
|
-
h1 {
|
|
31
|
-
font-size: 2em;
|
|
32
|
-
line-height: 1;
|
|
33
|
-
margin: 21px 0;
|
|
34
|
-
}
|
|
35
|
-
h2 {
|
|
36
|
-
font-size: 1.5em;
|
|
37
|
-
line-height: 1;
|
|
38
|
-
margin: 20px 0;
|
|
39
|
-
}
|
|
40
|
-
h3 {
|
|
41
|
-
font-size: 1.2em;
|
|
42
|
-
line-height: 1;
|
|
43
|
-
margin: 19px 0;
|
|
44
|
-
}
|
|
45
|
-
h4 {
|
|
46
|
-
font-size: 1em;
|
|
47
|
-
line-height: 1.05;
|
|
48
|
-
margin: 21px 0;
|
|
49
|
-
}
|
|
50
|
-
h5 {
|
|
51
|
-
font-size: 0.83em;
|
|
52
|
-
line-height: 1;
|
|
53
|
-
margin: 22px 0;
|
|
54
|
-
}
|
|
55
|
-
h6 {
|
|
56
|
-
font-size: 0.67em;
|
|
57
|
-
line-height: 1;
|
|
58
|
-
margin: 25px 0;
|
|
59
|
-
}
|
|
60
|
-
pre {
|
|
61
|
-
font-family: Monospace;
|
|
62
|
-
font-size: 13px;
|
|
63
|
-
margin: 13px 0;
|
|
64
|
-
}
|
|
65
|
-
p {
|
|
66
|
-
margin: 0.5em 0 1em 0;
|
|
67
|
-
}
|
|
68
|
-
ul, ol {
|
|
69
|
-
list-style-position: outside;
|
|
70
|
-
margin: 1em 0;
|
|
71
|
-
padding-inline-start: 3em;
|
|
72
|
-
}
|
|
177
|
+
${_generateHtmlBlockContentStyles()}
|
|
73
178
|
.d2l-html-block-compact ul,
|
|
74
179
|
.d2l-html-block-compact ol {
|
|
75
180
|
padding-inline-start: 1.5em;
|
|
76
181
|
}
|
|
77
|
-
ul, ul[type="disc"] {
|
|
78
|
-
list-style-type: disc;
|
|
79
|
-
}
|
|
80
|
-
ul ul,
|
|
81
|
-
ul ol,
|
|
82
|
-
ol ul,
|
|
83
|
-
ol ol {
|
|
84
|
-
margin-bottom: 0;
|
|
85
|
-
margin-top: 0;
|
|
86
|
-
}
|
|
87
|
-
ul ul,
|
|
88
|
-
ol ul,
|
|
89
|
-
ul[type="circle"] {
|
|
90
|
-
list-style-type: circle;
|
|
91
|
-
}
|
|
92
|
-
ul ul ul,
|
|
93
|
-
ul ol ul,
|
|
94
|
-
ol ul ul,
|
|
95
|
-
ol ol ul,
|
|
96
|
-
ul[type="square"] {
|
|
97
|
-
list-style-type: square;
|
|
98
|
-
}
|
|
99
|
-
a,
|
|
100
|
-
a:visited,
|
|
101
|
-
a:link,
|
|
102
|
-
a:active {
|
|
103
|
-
color: var(--d2l-color-celestine, #006fbf);
|
|
104
|
-
cursor: pointer;
|
|
105
|
-
text-decoration: none;
|
|
106
|
-
}
|
|
107
|
-
a:hover {
|
|
108
|
-
color: var(--d2l-color-celestine-minus-1, #004489);
|
|
109
|
-
text-decoration: underline;
|
|
110
|
-
}
|
|
111
|
-
a {
|
|
112
|
-
--d2l-focus-ring-offset: 1px;
|
|
113
|
-
--d2l-focus-ring-color: var(--d2l-color-celestine, #006fbf);
|
|
114
|
-
}
|
|
115
|
-
${getFocusRingStyles('a', { extraStyles: css`border-radius: 2px; text-decoration: underline;` })}
|
|
116
|
-
@media print {
|
|
117
|
-
a,
|
|
118
|
-
a:visited,
|
|
119
|
-
a:link,
|
|
120
|
-
a:active {
|
|
121
|
-
color: var(--d2l-color-ferrite, #202122);
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
mjx-assistive-mml math {
|
|
125
|
-
position: absolute;
|
|
126
|
-
}
|
|
127
182
|
${codeStyles}
|
|
128
183
|
`;
|
|
129
184
|
|
|
@@ -174,11 +229,8 @@ class HtmlBlock extends LoadingCompleteMixin(LitElement) {
|
|
|
174
229
|
return [ htmlBlockContentStyles, css`
|
|
175
230
|
:host {
|
|
176
231
|
display: block;
|
|
177
|
-
overflow-wrap: break-word;
|
|
178
|
-
overflow-x: auto;
|
|
179
|
-
overflow-y: hidden;
|
|
180
|
-
text-align: start;
|
|
181
232
|
}
|
|
233
|
+
${_generateHtmlBlockRootStyles(':host')}
|
|
182
234
|
:host([inline]),
|
|
183
235
|
:host([inline]) .d2l-html-block-rendered {
|
|
184
236
|
display: inline;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.259.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",
|