@prosekit/basic 0.7.3 → 0.8.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.
@@ -1,249 +1,316 @@
1
- :root {
2
- --prosekit-node-selection-color: rgba(57, 136, 255, 0.2);
3
- --prosekit-autocomplete-color: rgba(209, 213, 219, 0.15); /* tailwind bg-gray-300/15 */
1
+ .ProseMirror {
2
+ --prosekit-hue: 250;
3
+ --prosekit-outline-color: hsl(var(--prosekit-hue) 100% 60%);
4
+ --prosekit-node-selection-color: hsl(var(--prosekit-hue) 100% 60% / .22);
5
+ --prosekit-border-color: #9993;
6
+ --prosekit-blockquote-color: #9996;
7
+ --prosekit-autocomplete-color: #8080801a;
4
8
  }
5
9
 
6
- .ProseMirror {
7
- & {
8
- /* Disable margin collapsing */
9
- display: flex;
10
- flex-direction: column;
10
+ @supports (color: oklch(70% 0.2 240deg)) {
11
+ .ProseMirror {
12
+ --prosekit-outline-color: oklch(.66 .2 var(--prosekit-hue));
13
+ --prosekit-node-selection-color: oklch(.66 .2 var(--prosekit-hue) / .1);
11
14
  }
15
+ }
12
16
 
13
- & {
14
- /* Set the default line height as same as block handle's height */
15
- line-height: 1.5;
17
+ @supports (color: color-mix(in srgb, CanvasText 15%, Canvas)) {
18
+ .ProseMirror {
19
+ --prosekit-border-color: color-mix(in srgb, CanvasText 15%, Canvas);
20
+ --prosekit-blockquote-color: color-mix(in srgb, CanvasText 40%, Canvas);
21
+ --prosekit-autocomplete-color: color-mix(in srgb, CanvasText 5%, Canvas);
16
22
  }
23
+ }
17
24
 
18
- & p:first-child,
19
- & h1:first-child,
20
- & h2:first-child,
21
- & h3:first-child,
22
- & h4:first-child,
23
- & h5:first-child,
24
- & h6:first-child {
25
- margin-top: 0;
26
- }
25
+ .ProseMirror {
26
+ flex-direction: column;
27
+ line-height: 1.5;
28
+ display: flex;
29
+ }
27
30
 
28
- & p:last-child,
29
- & h1:last-child,
30
- & h2:last-child,
31
- & h3:last-child,
32
- & h4:last-child,
33
- & h5:last-child,
34
- & h6:last-child {
35
- margin-bottom: 0;
36
- }
31
+ .ProseMirror h1 {
32
+ margin: 36px 0 4px;
33
+ padding: 3px 2px;
34
+ font-size: 40px;
35
+ font-weight: 700;
36
+ line-height: 44px;
37
+ }
37
38
 
38
- & h1,
39
- & h2,
40
- & h3,
41
- & h4,
42
- & h5,
43
- & h6 {
44
- padding-top: 0;
45
- padding-bottom: 0;
46
- border-style: none;
47
- font-weight: 600;
48
- line-height: 1.25;
49
- }
39
+ .ProseMirror h2 {
40
+ margin: 32px 0 4px;
41
+ padding: 3px 2px;
42
+ font-size: 30px;
43
+ font-weight: 600;
44
+ line-height: 39px;
45
+ }
50
46
 
51
- & a {
52
- font-weight: 500;
53
- text-decoration: underline;
54
- }
47
+ .ProseMirror h3 {
48
+ margin: 22px 0 1px;
49
+ padding: 3px 2px;
50
+ font-size: 24px;
51
+ font-weight: 600;
52
+ line-height: 32px;
53
+ }
55
54
 
56
- & p,
57
- & ul,
58
- & ol,
59
- & pre {
60
- margin: 0;
61
- padding: 0.5rem 0;
62
- line-height: 1.5;
63
- }
55
+ .ProseMirror h4 {
56
+ margin: 16px 0 1px;
57
+ padding: 3px 2px;
58
+ font-size: 20px;
59
+ font-weight: 600;
60
+ line-height: 26px;
61
+ }
64
62
 
65
- & blockquote {
66
- padding-inline-start: 1em;
67
- border-inline-start: 0.25em solid hsl(0 0% 60% / 0.4);
68
- }
63
+ .ProseMirror h5 {
64
+ margin: 14px 0 1px;
65
+ padding: 3px 2px;
66
+ font-size: 18px;
67
+ font-weight: 600;
68
+ line-height: 22px;
69
+ }
69
70
 
70
- & h1 {
71
- margin: 1rem 0;
72
- font-size: 2.25em;
73
- }
71
+ .ProseMirror h6 {
72
+ margin: 12px 0 1px;
73
+ padding: 3px 2px;
74
+ font-size: 16px;
75
+ font-weight: 600;
76
+ line-height: 20px;
77
+ }
74
78
 
75
- & h2 {
76
- margin: 1.75em 0 0.5em;
77
- font-size: 1.75em;
78
- }
79
+ .ProseMirror p {
80
+ margin: 1px 0 0;
81
+ padding: 3px 2px;
82
+ font-size: 16px;
83
+ line-height: 24px;
84
+ }
79
85
 
80
- & h3 {
81
- margin: 1.5em 0 0.5em;
82
- font-size: 1.375em;
83
- }
86
+ .ProseMirror code {
87
+ font-size: .875em;
88
+ font-weight: 500;
89
+ }
84
90
 
85
- & h4 {
86
- margin: 1em 0;
87
- font-size: 1.125em;
88
- }
91
+ .ProseMirror pre {
92
+ border: 1px solid var(--prosekit-border-color);
93
+ background-color: var(--prosemirror-highlight-bg, inherit);
94
+ color: var(--prosemirror-highlight, inherit);
95
+ border-radius: .375rem;
96
+ margin: .5rem 0;
97
+ padding: 2rem;
98
+ overflow-x: auto;
99
+ }
89
100
 
90
- & h5 {
91
- margin: 0.5em 0;
92
- }
101
+ .ProseMirror pre, .ProseMirror code {
102
+ hyphens: none;
103
+ white-space: pre;
104
+ word-break: normal;
105
+ word-spacing: normal;
106
+ overflow-wrap: normal;
107
+ tab-size: 4;
108
+ }
93
109
 
94
- & h6 {
95
- opacity: 0.8;
96
- }
110
+ .ProseMirror pre code {
111
+ font-weight: inherit;
112
+ }
97
113
 
98
- & img,
99
- & video {
100
- width: min-content;
101
- max-width: 100%;
102
- margin: 0.5em 0;
103
- }
114
+ .ProseMirror pre:has(code) {
115
+ direction: ltr;
116
+ }
104
117
 
105
- & code {
106
- font-weight: 600;
107
- font-size: 0.875em;
108
- }
118
+ .ProseMirror img, .ProseMirror video {
119
+ width: min-content;
120
+ max-width: 100%;
121
+ margin: .5em 0;
122
+ }
109
123
 
110
- & pre {
111
- margin: 0.5rem 0;
112
- padding: 2rem 2rem;
113
- overflow-x: auto;
114
- border: 1px solid hsl(0 0% 50% / 0.2);
115
- border-radius: 0.375rem;
116
- /* CSS variables `prosemirror-highlight` and `prosemirror-highlight-bg` are set by package `prosemirror-highlight` */
117
- background-color: var(--prosemirror-highlight-bg, inherit);
118
- color: var(--prosemirror-highlight, inherit);
119
- }
124
+ .ProseMirror blockquote {
125
+ padding-top: 3px;
126
+ padding-bottom: 3px;
127
+ margin: 4px 0;
128
+ padding-inline: 1em 2px;
129
+ position: relative;
130
+ }
120
131
 
121
- & pre,
122
- & code {
123
- white-space: pre;
124
- word-break: normal;
125
- word-spacing: normal;
126
- word-wrap: normal;
127
- hyphens: none;
128
- tab-size: 4;
129
- }
132
+ .ProseMirror blockquote:before {
133
+ top: 2px;
134
+ bottom: 2px;
135
+ border-inline-start: .25em solid var(--prosekit-blockquote-color);
136
+ content: "";
137
+ display: block;
138
+ position: absolute;
139
+ inset-inline-start: 2px;
140
+ }
130
141
 
131
- & pre code {
132
- font-weight: inherit;
133
- }
142
+ .ProseMirror hr {
143
+ color: var(--prosekit-border-color);
144
+ border-width: 1px 0 0;
145
+ margin: 13px 0;
146
+ }
134
147
 
135
- & pre:has(code) {
136
- /* Force the code block to be left-to-right */
137
- direction: ltr;
138
- }
148
+ .ProseMirror .prosekit-horizontal-rule {
149
+ border-width: 0;
150
+ margin: 1px 0;
151
+ padding: 12px 2px;
152
+ line-height: 1px;
153
+ }
139
154
 
140
- & hr {
141
- margin: 2em 0;
142
- border-width: 1px;
143
- }
155
+ .ProseMirror .prosekit-horizontal-rule hr {
156
+ margin: 0;
157
+ }
144
158
 
145
- & .prosekit-horizontal-rule {
146
- margin: 1em 0;
147
- padding: 1em 0;
148
- /* Set a small line-height so that the block handle can align to the middle
149
- of the horizontal rule */
150
- line-height: 1px;
159
+ .ProseMirror .prosekit-horizontal-rule.prosekit-page-break {
160
+ position: relative;
161
+ }
151
162
 
152
- & hr {
153
- margin: 0;
154
- }
155
- }
163
+ .ProseMirror .prosekit-horizontal-rule.prosekit-page-break hr {
164
+ border-style: dashed;
165
+ font-size: 12px;
166
+ mask-image: linear-gradient(to right, #000, #000 calc(50% - 6ch), #0000 calc(50% - 6ch) calc(50% + 6ch), #000 calc(50% + 6ch), #000);
167
+ }
156
168
 
157
- & .tableWrapper {
158
- margin-top: 0.5em;
159
- margin-bottom: 1em;
160
- }
169
+ .ProseMirror .prosekit-horizontal-rule.prosekit-page-break:after {
170
+ content: "Page break";
171
+ color: var(--prosekit-border-color);
172
+ pointer-events: none;
173
+ font-size: 12px;
174
+ position: absolute;
175
+ top: 50%;
176
+ left: 50%;
177
+ transform: translate(-50%, -50%);
178
+ }
161
179
 
162
- & .prosemirror-flat-list {
163
- /* Use the same line-height as <p> */
164
- line-height: 1.5;
165
-
166
- &::before,
167
- & > .list-marker {
168
- /* Use the same padding as <p> */
169
- top: 0.5rem;
170
- }
171
-
172
- &:has(> div.list-content > h1) {
173
- &::before,
174
- & > .list-marker {
175
- top: 0.75em;
176
- }
177
- }
178
- &:has(> div.list-content > h2) {
179
- &::before,
180
- & > .list-marker {
181
- top: 0.5em;
182
- }
183
- }
184
- &:has(> div.list-content > h3) {
185
- &::before,
186
- & > .list-marker {
187
- top: 0.25em;
188
- }
189
- }
190
- &:has(> div.list-content > h4) {
191
- &::before,
192
- & > .list-marker {
193
- top: 0;
194
- }
195
- }
196
- &:has(> div.list-content > h5) {
197
- &::before,
198
- & > .list-marker {
199
- top: -0.2em;
200
- }
201
- }
202
- &:has(> div.list-content > h6) {
203
- &::before,
204
- & > .list-marker {
205
- top: -0.3em;
206
- }
207
- }
208
- }
180
+ .ProseMirror .prosekit-horizontal-rule.prosekit-page-break.ProseMirror-selectednode hr {
181
+ border-color: var(--prosekit-outline-color);
182
+ }
209
183
 
210
- /*
211
- Don't generate box for node view wrapper. This make it easier to style
212
- the node views.
213
- */
214
- div[data-node-view-root="true"] {
215
- display: contents;
216
- }
184
+ .ProseMirror .prosekit-horizontal-rule.prosekit-page-break.ProseMirror-selectednode:after {
185
+ color: var(--prosekit-outline-color);
186
+ }
217
187
 
218
- & .ProseMirror-selectednode {
219
- border-radius: 0.2rem;
220
- outline-color: var(--prosekit-node-selection-color);
221
- outline-style: solid;
222
- outline-width: 0.3rem;
223
- background-color: var(--prosekit-node-selection-color);
188
+ @media print {
189
+ .ProseMirror .prosekit-horizontal-rule.prosekit-page-break {
190
+ opacity: 0;
224
191
  }
192
+ }
225
193
 
226
- & .prosekit-autocomplete-match {
227
- border-radius: 0.1em;
228
- background-color: var(--prosekit-autocomplete-color);
229
- box-shadow: 0 0 0 0.3em var(--prosekit-autocomplete-color);
230
- }
194
+ .ProseMirror .tableWrapper {
195
+ margin-top: .5em;
196
+ margin-bottom: 1em;
197
+ }
231
198
 
232
- &.prosekit-dragging {
233
- --prosekit-node-selection-color: transparent;
234
- }
199
+ .ProseMirror .tableWrapper table, .ProseMirror .tableWrapper tr, .ProseMirror .tableWrapper th, .ProseMirror .tableWrapper td {
200
+ border: 1px solid var(--prosekit-border-color);
201
+ border-collapse: collapse;
202
+ border-spacing: 0;
203
+ }
235
204
 
236
- .prosemirror-math-inline.prosemirror-math-head-inside .prosemirror-math-source {
237
- &::before {
238
- content: "$";
239
- opacity: 0.5;
240
- }
241
- &::after {
242
- content: "$";
243
- opacity: 0.5;
244
- }
245
- }
205
+ .ProseMirror .tableWrapper .selectedCell {
206
+ --color: 210, 100%, 56%;
207
+ border: 1px solid var(--prosekit-outline-color);
208
+ background-color: var(--prosekit-node-selection-color);
209
+ border-style: double;
210
+ }
211
+
212
+ .ProseMirror .tableWrapper .column-resize-handle {
213
+ outline-color: var(--prosekit-outline-color);
214
+ background-color: var(--prosekit-outline-color);
215
+ outline-width: 1px;
216
+ outline-style: solid;
217
+ }
218
+
219
+ .ProseMirror a {
220
+ text-decoration: underline;
221
+ }
222
+
223
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h1):before {
224
+ top: 49px;
225
+ }
226
+
227
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h1) > .list-marker {
228
+ top: 49px;
229
+ }
230
+
231
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h2):before {
232
+ top: 42.5px;
233
+ }
234
+
235
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h2) > .list-marker {
236
+ top: 42.5px;
237
+ }
238
+
239
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h3):before {
240
+ top: 29px;
241
+ }
242
+
243
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h3) > .list-marker {
244
+ top: 29px;
245
+ }
246
+
247
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h4):before {
248
+ top: 20px;
249
+ }
250
+
251
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h4) > .list-marker {
252
+ top: 20px;
246
253
  }
247
254
 
255
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h5):before {
256
+ top: 16px;
257
+ }
258
+
259
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h5) > .list-marker {
260
+ top: 16px;
261
+ }
262
+
263
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h6):before {
264
+ top: 13px;
265
+ }
266
+
267
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > h6) > .list-marker {
268
+ top: 13px;
269
+ }
270
+
271
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > p):before {
272
+ top: 4px;
273
+ }
274
+
275
+ .ProseMirror .prosemirror-flat-list:has( > div.list-content > p) > .list-marker {
276
+ top: 4px;
277
+ }
278
+
279
+ .ProseMirror div[data-node-view-root="true"] {
280
+ display: contents;
281
+ }
248
282
 
249
- /*# sourceMappingURL=typography.css.map*/
283
+ .ProseMirror .ProseMirror-selectednode {
284
+ outline-color: var(--prosekit-outline-color);
285
+ background-color: var(--prosekit-node-selection-color);
286
+ border-radius: 2px;
287
+ outline-width: 1px;
288
+ outline-style: solid;
289
+ }
290
+
291
+ .ProseMirror pre.ProseMirror-selectednode {
292
+ border-radius: .375rem;
293
+ }
294
+
295
+ .ProseMirror .prosekit-autocomplete-match {
296
+ background-color: var(--prosekit-autocomplete-color);
297
+ box-shadow: 0 0 0 .3em var(--prosekit-autocomplete-color);
298
+ border-radius: .1em;
299
+ }
300
+
301
+ .ProseMirror.prosekit-dragging {
302
+ --prosekit-node-selection-color: transparent;
303
+ }
304
+
305
+ .ProseMirror .prosemirror-math-inline.prosemirror-math-head-inside .prosemirror-math-source:before, .ProseMirror .prosemirror-math-inline.prosemirror-math-head-inside .prosemirror-math-source:after {
306
+ content: "$";
307
+ opacity: .5;
308
+ }
309
+
310
+ .ProseMirror .prosemirror-math-block:not(.prosemirror-math-head-inside) {
311
+ margin: .5rem 0;
312
+ }
313
+
314
+ .ProseMirror .prosemirror-math-block .prosemirror-math-display {
315
+ padding: .5rem;
316
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@prosekit/basic",
3
3
  "type": "module",
4
- "version": "0.7.3",
4
+ "version": "0.8.0",
5
5
  "private": false,
6
6
  "description": "A quick starter for ProseKit",
7
7
  "author": {
@@ -42,19 +42,20 @@
42
42
  "src"
43
43
  ],
44
44
  "dependencies": {
45
- "@prosekit/core": "^0.10.0",
46
- "@prosekit/extensions": "^0.14.2",
45
+ "@prosekit/core": "^0.11.0",
46
+ "@prosekit/extensions": "^0.15.0",
47
47
  "@prosekit/pm": "^0.1.15"
48
48
  },
49
49
  "devDependencies": {
50
- "@types/jsdom": "^27.0.0",
51
- "happy-dom": "^20.7.0",
52
- "jsdom": "^28.1.0",
53
- "tsdown": "^0.20.3",
50
+ "@types/jsdom": "^28.0.1",
51
+ "happy-dom": "^20.8.7",
52
+ "jsdom": "^29.0.1",
53
+ "sass": "^1.98.0",
54
+ "tsdown": "^0.21.4",
54
55
  "typescript": "~5.9.3",
55
- "vitest": "^4.1.0-beta.4",
56
- "@prosekit/config-ts": "0.0.0",
56
+ "vitest": "^4.1.1",
57
57
  "@prosekit/config-tsdown": "0.0.0",
58
+ "@prosekit/config-ts": "0.0.0",
58
59
  "@prosekit/config-vitest": "0.0.0"
59
60
  },
60
61
  "publishConfig": {
@@ -68,6 +69,8 @@
68
69
  }
69
70
  },
70
71
  "scripts": {
72
+ "dev": "sass --watch --no-source-map ./src/typography.scss ./src/typography.gen.css",
73
+ "gen": "sass --no-source-map ./src/typography.scss ./src/typography.gen.css",
71
74
  "build:tsc": "tsc -b tsconfig.json",
72
75
  "build:tsdown": "tsdown"
73
76
  },