@vaadin/markdown 25.1.0-alpha6 → 25.1.0-alpha8
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/custom-elements.json +89 -0
- package/package.json +10 -8
- package/src/styles/vaadin-markdown-base-styles.d.ts +8 -0
- package/src/styles/vaadin-markdown-base-styles.js +198 -0
- package/src/vaadin-markdown.d.ts +2 -1
- package/src/vaadin-markdown.js +10 -2
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "vaadin-markdown.js",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": [
|
|
10
|
+
{
|
|
11
|
+
"kind": "js",
|
|
12
|
+
"name": "*",
|
|
13
|
+
"declaration": {
|
|
14
|
+
"name": "*",
|
|
15
|
+
"module": "src/vaadin-markdown.js"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"kind": "javascript-module",
|
|
22
|
+
"path": "src/vaadin-markdown.js",
|
|
23
|
+
"declarations": [
|
|
24
|
+
{
|
|
25
|
+
"kind": "class",
|
|
26
|
+
"description": "`<vaadin-markdown>` is a web component for rendering Markdown content.\nIt takes Markdown source as input and renders the corresponding HTML.\n\n### Styling\n\nThe component does not have specific shadow DOM parts for styling the rendered Markdown content itself,\nas the content is rendered directly into the component's light DOM via a slot.\nYou can style the rendered HTML elements using standard CSS selectors targeting the `vaadin-markdown` element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
27
|
+
"name": "Markdown",
|
|
28
|
+
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "content",
|
|
32
|
+
"privacy": "public",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "string"
|
|
35
|
+
},
|
|
36
|
+
"description": "The Markdown content.",
|
|
37
|
+
"attribute": "content"
|
|
38
|
+
}
|
|
39
|
+
],
|
|
40
|
+
"attributes": [
|
|
41
|
+
{
|
|
42
|
+
"name": "content",
|
|
43
|
+
"type": {
|
|
44
|
+
"text": "string"
|
|
45
|
+
},
|
|
46
|
+
"description": "The Markdown content.",
|
|
47
|
+
"fieldName": "content"
|
|
48
|
+
}
|
|
49
|
+
],
|
|
50
|
+
"mixins": [
|
|
51
|
+
{
|
|
52
|
+
"name": "SlotStylesMixin",
|
|
53
|
+
"package": "@vaadin/component-base/src/slot-styles-mixin.js"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "ElementMixin",
|
|
57
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "ThemableMixin",
|
|
61
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"name": "PolylitMixin",
|
|
65
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
66
|
+
}
|
|
67
|
+
],
|
|
68
|
+
"superclass": {
|
|
69
|
+
"name": "LitElement",
|
|
70
|
+
"package": "lit"
|
|
71
|
+
},
|
|
72
|
+
"tagName": "vaadin-markdown",
|
|
73
|
+
"customElement": true,
|
|
74
|
+
"events": []
|
|
75
|
+
}
|
|
76
|
+
],
|
|
77
|
+
"exports": [
|
|
78
|
+
{
|
|
79
|
+
"kind": "js",
|
|
80
|
+
"name": "Markdown",
|
|
81
|
+
"declaration": {
|
|
82
|
+
"name": "Markdown",
|
|
83
|
+
"module": "src/vaadin-markdown.js"
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/markdown",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-alpha8",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"src",
|
|
24
24
|
"vaadin-*.d.ts",
|
|
25
25
|
"vaadin-*.js",
|
|
26
|
+
"custom-elements.json",
|
|
26
27
|
"web-types.json",
|
|
27
28
|
"web-types.lit.json"
|
|
28
29
|
],
|
|
@@ -34,22 +35,23 @@
|
|
|
34
35
|
],
|
|
35
36
|
"dependencies": {
|
|
36
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
37
|
-
"@vaadin/component-base": "25.1.0-
|
|
38
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
38
|
+
"@vaadin/component-base": "25.1.0-alpha8",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha8",
|
|
39
40
|
"dompurify": "^3.2.5",
|
|
40
41
|
"lit": "^3.0.0",
|
|
41
42
|
"marked": "^16.0.0"
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
|
-
"@vaadin/aura": "25.1.0-
|
|
45
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
46
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
45
|
+
"@vaadin/aura": "25.1.0-alpha8",
|
|
46
|
+
"@vaadin/chai-plugins": "25.1.0-alpha8",
|
|
47
|
+
"@vaadin/test-runner-commands": "25.1.0-alpha8",
|
|
47
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
48
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha8"
|
|
49
50
|
},
|
|
51
|
+
"customElements": "custom-elements.json",
|
|
50
52
|
"web-types": [
|
|
51
53
|
"web-types.json",
|
|
52
54
|
"web-types.lit.json"
|
|
53
55
|
],
|
|
54
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "810590c9c7682a9326c9352df795b5ea4891a71f"
|
|
55
57
|
}
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2025 - 2026 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
|
+
import { css } from 'lit';
|
|
8
|
+
|
|
9
|
+
export const markdownSlotStyles = css`
|
|
10
|
+
@layer vaadin.base {
|
|
11
|
+
vaadin-markdown {
|
|
12
|
+
line-height: 1.6;
|
|
13
|
+
|
|
14
|
+
h1,
|
|
15
|
+
h2,
|
|
16
|
+
h3,
|
|
17
|
+
h4,
|
|
18
|
+
h5,
|
|
19
|
+
h6 {
|
|
20
|
+
font-weight: 600;
|
|
21
|
+
line-height: 1.25;
|
|
22
|
+
text-wrap: balance;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
h1 {
|
|
26
|
+
font-size: 1.75em;
|
|
27
|
+
margin-top: 1.8em;
|
|
28
|
+
margin-bottom: 0.9em;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
h2 {
|
|
32
|
+
font-size: 1.5em;
|
|
33
|
+
margin-top: 1.6em;
|
|
34
|
+
margin-bottom: 0.8em;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
h3 {
|
|
38
|
+
font-size: 1.25em;
|
|
39
|
+
margin-top: 1.4em;
|
|
40
|
+
margin-bottom: 0.7em;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
h4 {
|
|
44
|
+
font-size: 1.125em;
|
|
45
|
+
margin-top: 1.2em;
|
|
46
|
+
margin-bottom: 0.6em;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
h5 {
|
|
50
|
+
font-size: 1em;
|
|
51
|
+
margin-top: 1em;
|
|
52
|
+
margin-bottom: 0.5em;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
h6 {
|
|
56
|
+
font-size: 0.875em;
|
|
57
|
+
margin-top: 1em;
|
|
58
|
+
margin-bottom: 0.5em;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
p,
|
|
62
|
+
ul,
|
|
63
|
+
ol,
|
|
64
|
+
blockquote,
|
|
65
|
+
table,
|
|
66
|
+
figure {
|
|
67
|
+
margin-inline: 0;
|
|
68
|
+
margin-block: 1.25em;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
code {
|
|
72
|
+
font-family: ui-monospace, monospace;
|
|
73
|
+
font-size: 0.9em;
|
|
74
|
+
line-height: 1.25;
|
|
75
|
+
font-weight: 500;
|
|
76
|
+
|
|
77
|
+
&::before,
|
|
78
|
+
&::after {
|
|
79
|
+
content: '\`';
|
|
80
|
+
color: var(--vaadin-text-color-secondary);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
pre {
|
|
85
|
+
background-color: light-dark(var(--vaadin-text-color), var(--vaadin-background-container));
|
|
86
|
+
border-radius: var(--vaadin-radius-m);
|
|
87
|
+
color: light-dark(var(--vaadin-background-color), var(--vaadin-text-color));
|
|
88
|
+
padding: var(--vaadin-padding-m);
|
|
89
|
+
|
|
90
|
+
code {
|
|
91
|
+
font-weight: 500;
|
|
92
|
+
|
|
93
|
+
&::before,
|
|
94
|
+
&::after {
|
|
95
|
+
content: '';
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
hr {
|
|
101
|
+
height: 0;
|
|
102
|
+
border: 0;
|
|
103
|
+
border-top: 1px solid var(--vaadin-border-color-secondary);
|
|
104
|
+
margin-block: 3em;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
b,
|
|
108
|
+
strong {
|
|
109
|
+
font-weight: 600;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
blockquote {
|
|
113
|
+
font-weight: 500;
|
|
114
|
+
font-style: italic;
|
|
115
|
+
border-left: 0.25rem solid var(--vaadin-border-color);
|
|
116
|
+
quotes: '\\201C' '\\201D' '\\2018' '\\2019';
|
|
117
|
+
margin-inline: 0;
|
|
118
|
+
padding-inline-start: 1em;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
ul {
|
|
122
|
+
list-style-type: disc;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
ul,
|
|
126
|
+
ol {
|
|
127
|
+
padding-inline-start: 1.625em;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
li {
|
|
131
|
+
margin-block: 0.5em;
|
|
132
|
+
padding-inline-start: 0.375em;
|
|
133
|
+
|
|
134
|
+
&::marker {
|
|
135
|
+
color: var(--vaadin-text-color-disabled);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
ol li::marker {
|
|
140
|
+
font-weight: 400;
|
|
141
|
+
color: var(--vaadin-text-color-secondary);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
ul:has(> li > input[type='checkbox']:first-child) {
|
|
145
|
+
list-style: none;
|
|
146
|
+
padding-inline-start: 0;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
img,
|
|
150
|
+
video,
|
|
151
|
+
svg,
|
|
152
|
+
canvas,
|
|
153
|
+
audio,
|
|
154
|
+
iframe,
|
|
155
|
+
embed,
|
|
156
|
+
object {
|
|
157
|
+
display: block;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
img,
|
|
161
|
+
video {
|
|
162
|
+
max-width: 100%;
|
|
163
|
+
height: auto;
|
|
164
|
+
border-radius: var(--vaadin-radius-m);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
figcaption {
|
|
168
|
+
font-size: 0.875em;
|
|
169
|
+
line-height: 1.125;
|
|
170
|
+
color: var(--vaadin-text-color-secondary);
|
|
171
|
+
margin-top: 0.75em;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
table {
|
|
175
|
+
min-width: 100%;
|
|
176
|
+
border-spacing: 0;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
th {
|
|
180
|
+
text-align: start;
|
|
181
|
+
font-weight: 500;
|
|
182
|
+
background: var(--vaadin-background-container);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
th,
|
|
186
|
+
td {
|
|
187
|
+
padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
tr:not(:last-child) {
|
|
191
|
+
th,
|
|
192
|
+
td {
|
|
193
|
+
border-bottom: 1px solid var(--vaadin-border-color-secondary);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
`;
|
package/src/vaadin-markdown.d.ts
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
7
|
+
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
7
8
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
8
9
|
|
|
9
10
|
/**
|
|
@@ -18,7 +19,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
18
19
|
*
|
|
19
20
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
20
21
|
*/
|
|
21
|
-
declare class Markdown extends ElementMixin(ThemableMixin(HTMLElement)) {
|
|
22
|
+
declare class Markdown extends SlotStylesMixin(ElementMixin(ThemableMixin(HTMLElement))) {
|
|
22
23
|
/**
|
|
23
24
|
* The Markdown content.
|
|
24
25
|
*/
|
package/src/vaadin-markdown.js
CHANGED
|
@@ -7,8 +7,10 @@ import { css, html, LitElement } from 'lit';
|
|
|
7
7
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
8
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
9
9
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
10
|
+
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
10
11
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
12
|
import { renderMarkdownToElement } from './markdown-helpers.js';
|
|
13
|
+
import { markdownSlotStyles } from './styles/vaadin-markdown-base-styles.js';
|
|
12
14
|
|
|
13
15
|
/**
|
|
14
16
|
* `<vaadin-markdown>` is a web component for rendering Markdown content.
|
|
@@ -22,12 +24,13 @@ import { renderMarkdownToElement } from './markdown-helpers.js';
|
|
|
22
24
|
*
|
|
23
25
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
24
26
|
*
|
|
25
|
-
* @customElement
|
|
27
|
+
* @customElement vaadin-markdown
|
|
26
28
|
* @extends HTMLElement
|
|
27
29
|
* @mixes ElementMixin
|
|
28
30
|
* @mixes ThemableMixin
|
|
31
|
+
* @mixes SlotStylesMixin
|
|
29
32
|
*/
|
|
30
|
-
class Markdown extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
|
|
33
|
+
class Markdown extends SlotStylesMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
31
34
|
static get is() {
|
|
32
35
|
return 'vaadin-markdown';
|
|
33
36
|
}
|
|
@@ -44,6 +47,11 @@ class Markdown extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
|
|
|
44
47
|
`;
|
|
45
48
|
}
|
|
46
49
|
|
|
50
|
+
/** @protected */
|
|
51
|
+
get slotStyles() {
|
|
52
|
+
return [markdownSlotStyles];
|
|
53
|
+
}
|
|
54
|
+
|
|
47
55
|
static get properties() {
|
|
48
56
|
return {
|
|
49
57
|
/**
|
package/web-types.json
CHANGED