@vscode/markdown-editor 0.0.2-2 → 0.0.2-20
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/dist/_observables/observableInternal/index.d.ts +1 -1
- package/dist/_observables/observableInternal/logging/consoleObservableLogger.d.ts +1 -1
- package/dist/_observables/observableInternal/logging/debugger/devToolsLogger.d.ts +1 -1
- package/dist/_observables/observableInternal/logging/logging.d.ts +1 -1
- package/dist/_observables/observableInternal/reactions/{autorun.d.ts → createEffect.d.ts} +11 -3
- package/dist/index.d.ts +996 -52
- package/dist/index.js +3999 -1910
- package/dist/index.js.map +1 -1
- package/dist/markdown-editor.css +1 -0
- package/dist/observables.js +79 -101
- package/dist/observables.js.map +1 -1
- package/dist/{runOnChange-owE1SMC0.js → runOnChange-CkxK2gSn.js} +191 -163
- package/dist/runOnChange-CkxK2gSn.js.map +1 -0
- package/package.json +25 -8
- package/src/contrib/comments/commentInput.css +150 -0
- package/src/contrib/comments/comments.css +129 -0
- package/src/contrib/commentsVscode/vscodeCommentWidgetV2.css +166 -0
- package/src/view/editor.css +399 -32
- package/src/view/themes/default.css +6 -1
- package/src/view/themes/github.css +7 -7
- package/src/view/themes/vscode-default.css +344 -0
- package/src/view/themes/vscode-github.css +346 -0
- package/dist/runOnChange-owE1SMC0.js.map +0 -1
- /package/dist/_observables/observableInternal/reactions/{autorunImpl.d.ts → createEffectImpl.d.ts} +0 -0
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Persistent comments: range highlights, leader lines, and the side rail of
|
|
3
|
+
* comment cards (CommentsView). Uses --vscode-* variables with neutral
|
|
4
|
+
* fallbacks so it works in standalone fixtures too.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* --- Overlay layers ------------------------------------------------------ */
|
|
8
|
+
|
|
9
|
+
.md-comment-shapes {
|
|
10
|
+
position: absolute;
|
|
11
|
+
top: 0;
|
|
12
|
+
left: 0;
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
/* The tail extends past the content into the rail; never clip it. */
|
|
16
|
+
overflow: visible;
|
|
17
|
+
/* Never block the document; hover is driven from the cards. */
|
|
18
|
+
pointer-events: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Highlight fill and leader stroke share one solid color inside a single
|
|
22
|
+
* opacity group, so their overlap never darkens and the seam is invisible.
|
|
23
|
+
* The leader starts inside the highlight (hidden under the fill) and its bottom
|
|
24
|
+
* edge aligns with the selection bottom; the highlight's exit corner is squared
|
|
25
|
+
* (see buildConnectedPath) so there is no notch. */
|
|
26
|
+
.md-comment-group {
|
|
27
|
+
opacity: var(--md-comment-opacity, 0.16);
|
|
28
|
+
transition: opacity 0.1s ease;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.md-comment-group-hovered {
|
|
32
|
+
opacity: var(--md-comment-opacity-hover, 0.3);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.md-comment-shape-path {
|
|
36
|
+
fill: var(--md-comment-color, rgb(64, 120, 240));
|
|
37
|
+
stroke: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.md-comment-leader-path {
|
|
41
|
+
fill: none;
|
|
42
|
+
stroke: var(--md-comment-color, rgb(64, 120, 240));
|
|
43
|
+
stroke-width: 2;
|
|
44
|
+
stroke-linecap: butt;
|
|
45
|
+
stroke-linejoin: round;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* --- Cards (the right rail) ---------------------------------------------- */
|
|
49
|
+
|
|
50
|
+
.md-comment-card {
|
|
51
|
+
position: absolute;
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
gap: 8px;
|
|
56
|
+
padding: 12px 14px;
|
|
57
|
+
background: var(--vscode-editorWidget-background, #fff);
|
|
58
|
+
color: var(--vscode-editorWidget-foreground, #1f1f1f);
|
|
59
|
+
border: 1px solid var(--vscode-editorWidget-border, #e0e0e0);
|
|
60
|
+
border-radius: 8px;
|
|
61
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
62
|
+
font-family: var(--vscode-font-family, system-ui, sans-serif);
|
|
63
|
+
font-size: 13px;
|
|
64
|
+
transition: box-shadow 0.1s ease, border-color 0.1s ease, top 0.12s ease;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.md-comment-card-hovered {
|
|
68
|
+
border-color: var(--md-comment-leader-hover, rgba(64, 120, 240, 1));
|
|
69
|
+
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.md-comment-card-header {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
gap: 8px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.md-comment-avatar {
|
|
79
|
+
flex: 0 0 auto;
|
|
80
|
+
display: flex;
|
|
81
|
+
align-items: center;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
width: 24px;
|
|
84
|
+
height: 24px;
|
|
85
|
+
border-radius: 50%;
|
|
86
|
+
background: var(--md-comment-avatar-bg, #d6e2fb);
|
|
87
|
+
color: var(--md-comment-avatar-fg, #25408f);
|
|
88
|
+
font-size: 10px;
|
|
89
|
+
font-weight: 600;
|
|
90
|
+
letter-spacing: 0.3px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.md-comment-author {
|
|
94
|
+
font-weight: 600;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.md-comment-time {
|
|
98
|
+
color: var(--vscode-descriptionForeground, #767676);
|
|
99
|
+
font-size: 12px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.md-comment-menu {
|
|
103
|
+
margin-left: auto;
|
|
104
|
+
color: var(--vscode-descriptionForeground, #767676);
|
|
105
|
+
cursor: default;
|
|
106
|
+
user-select: none;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.md-comment-body {
|
|
110
|
+
line-height: 1.45;
|
|
111
|
+
white-space: pre-wrap;
|
|
112
|
+
word-break: break-word;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.md-comment-reply {
|
|
116
|
+
align-self: flex-start;
|
|
117
|
+
margin: 0;
|
|
118
|
+
padding: 0;
|
|
119
|
+
border: none;
|
|
120
|
+
background: transparent;
|
|
121
|
+
color: var(--vscode-textLink-foreground, #2563c9);
|
|
122
|
+
font: inherit;
|
|
123
|
+
font-weight: 600;
|
|
124
|
+
cursor: pointer;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.md-comment-reply:hover {
|
|
128
|
+
text-decoration: underline;
|
|
129
|
+
}
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
3
|
+
* Licensed under the MIT License. See License.txt in the project root for license information.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
|
|
6
|
+
/*
|
|
7
|
+
* Styling for VsCodeCommentWidgetV2 — a replica of the Figma "Markdown comment"
|
|
8
|
+
* frames. It is theme-aware: every colour is driven by a VS Code `--vscode-*`
|
|
9
|
+
* design token, with the original Figma dark values kept only as literal
|
|
10
|
+
* fallbacks (so the card still renders when no theme provider is present). Wrap
|
|
11
|
+
* the widget in `.vscode-comments-light` / `.vscode-comments-dark` (from
|
|
12
|
+
* vscodeCommentTokens.css) to supply those tokens.
|
|
13
|
+
*
|
|
14
|
+
* Figma token -> VS Code token (fallback)
|
|
15
|
+
* editorWidget/background --vscode-editorWidget-background (#202122)
|
|
16
|
+
* editorHoverWidget/border --vscode-editorHoverWidget-border (#2a2b2c)
|
|
17
|
+
* foreground --vscode-foreground (#bfbfbf)
|
|
18
|
+
* icon/foreground --vscode-icon-foreground (#8c8c8c)
|
|
19
|
+
* textLink/foreground --vscode-textLink-foreground (#48a0c7)
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/* Supplemental tokens not provided by vscodeCommentTokens.css. */
|
|
23
|
+
.vscode-comments-light {
|
|
24
|
+
--vscode-icon-foreground: #616161;
|
|
25
|
+
--vscode-textLink-foreground: #005fb8;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.vscode-comments-dark {
|
|
29
|
+
--vscode-icon-foreground: #cccccc;
|
|
30
|
+
--vscode-textLink-foreground: #4daafc;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.vscode-comment-widget-v2 {
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
width: 320px;
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
gap: 12px;
|
|
39
|
+
padding: 8px;
|
|
40
|
+
/* size80 */
|
|
41
|
+
background: var(--vscode-editorWidget-background, #202122);
|
|
42
|
+
border: 1px solid var(--vscode-editorHoverWidget-border, var(--vscode-editorWidget-border, #2a2b2c));
|
|
43
|
+
border-radius: var(--vscode-cornerRadius-large, 8px);
|
|
44
|
+
/* Outer radius */
|
|
45
|
+
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
|
|
46
|
+
font-family: var(--vscode-font-family, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.vscode-comment-widget-v2 *,
|
|
50
|
+
.vscode-comment-widget-v2 *::before,
|
|
51
|
+
.vscode-comment-widget-v2 *::after {
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Header row: username on the left, edit/trash actions on the right. */
|
|
56
|
+
.vscode-comment-widget-v2-header {
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: space-between;
|
|
60
|
+
width: 100%;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.vscode-comment-widget-v2-title-group {
|
|
64
|
+
display: flex;
|
|
65
|
+
align-items: center;
|
|
66
|
+
gap: 6px;
|
|
67
|
+
/* size60 */
|
|
68
|
+
flex: 1 0 0;
|
|
69
|
+
min-width: 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.vscode-comment-widget-v2-username {
|
|
73
|
+
flex: 1 0 0;
|
|
74
|
+
min-width: 0;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
text-overflow: ellipsis;
|
|
77
|
+
white-space: nowrap;
|
|
78
|
+
/* Font ramp/Heading 3: SF Pro Text Semibold 13 */
|
|
79
|
+
font-size: 13px;
|
|
80
|
+
font-weight: 600;
|
|
81
|
+
line-height: normal;
|
|
82
|
+
color: var(--vscode-foreground, #bfbfbf);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.vscode-comment-widget-v2-actions {
|
|
86
|
+
display: flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: 4px;
|
|
89
|
+
/* size40 */
|
|
90
|
+
flex-shrink: 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.vscode-comment-widget-v2-action {
|
|
94
|
+
display: inline-flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
justify-content: center;
|
|
97
|
+
width: 16px;
|
|
98
|
+
height: 16px;
|
|
99
|
+
padding: 0;
|
|
100
|
+
margin: 0;
|
|
101
|
+
border: none;
|
|
102
|
+
background: transparent;
|
|
103
|
+
color: var(--vscode-icon-foreground, #8c8c8c);
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.vscode-comment-widget-v2-action:hover {
|
|
108
|
+
color: var(--vscode-foreground, #bfbfbf);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.vscode-comment-widget-v2-action svg {
|
|
112
|
+
display: block;
|
|
113
|
+
width: 16px;
|
|
114
|
+
height: 16px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Body: comment text + optional "See more" / "See less" toggle. */
|
|
118
|
+
.vscode-comment-widget-v2-body {
|
|
119
|
+
display: flex;
|
|
120
|
+
flex-direction: column;
|
|
121
|
+
gap: 6px;
|
|
122
|
+
/* size60 */
|
|
123
|
+
width: 100%;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.vscode-comment-widget-v2-text {
|
|
127
|
+
margin: 0;
|
|
128
|
+
width: 100%;
|
|
129
|
+
/* Font ramp/Body 1: SF Pro Text Regular 13 */
|
|
130
|
+
font-size: 13px;
|
|
131
|
+
font-weight: 400;
|
|
132
|
+
line-height: normal;
|
|
133
|
+
color: var(--vscode-foreground, #bfbfbf);
|
|
134
|
+
opacity: 0.9;
|
|
135
|
+
white-space: pre-wrap;
|
|
136
|
+
word-break: break-word;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Collapsed bodies clamp to three lines (matches the Figma "See more" frame). */
|
|
140
|
+
.vscode-comment-widget-v2--collapsed .vscode-comment-widget-v2-text {
|
|
141
|
+
display: -webkit-box;
|
|
142
|
+
-webkit-box-orient: vertical;
|
|
143
|
+
-webkit-line-clamp: 3;
|
|
144
|
+
line-clamp: 3;
|
|
145
|
+
overflow: hidden;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.vscode-comment-widget-v2-toggle {
|
|
149
|
+
align-self: flex-start;
|
|
150
|
+
padding: 0;
|
|
151
|
+
margin: 0;
|
|
152
|
+
border: none;
|
|
153
|
+
background: none;
|
|
154
|
+
cursor: pointer;
|
|
155
|
+
text-align: left;
|
|
156
|
+
/* Font ramp/Label 1: SF Pro Text Regular 12 */
|
|
157
|
+
font-family: inherit;
|
|
158
|
+
font-size: 12px;
|
|
159
|
+
font-weight: 400;
|
|
160
|
+
line-height: normal;
|
|
161
|
+
color: var(--vscode-textLink-foreground, #48a0c7);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.vscode-comment-widget-v2-toggle:hover {
|
|
165
|
+
text-decoration: underline;
|
|
166
|
+
}
|