@sanity/code-input 3.0.1 → 4.1.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.
Files changed (52) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +140 -64
  3. package/lib/_chunks/CodeMirrorProxy-3836f097.js +619 -0
  4. package/lib/_chunks/CodeMirrorProxy-3836f097.js.map +1 -0
  5. package/lib/_chunks/CodeMirrorProxy-e83d4d37.js +611 -0
  6. package/lib/_chunks/CodeMirrorProxy-e83d4d37.js.map +1 -0
  7. package/lib/_chunks/index-17e68aff.js +563 -0
  8. package/lib/_chunks/index-17e68aff.js.map +1 -0
  9. package/lib/_chunks/index-9a4cb814.js +549 -0
  10. package/lib/_chunks/index-9a4cb814.js.map +1 -0
  11. package/lib/{src/index.d.ts → index.d.ts} +18 -10
  12. package/lib/index.esm.js +1 -1
  13. package/lib/index.esm.js.map +1 -1
  14. package/lib/index.js +10 -1
  15. package/lib/index.js.map +1 -1
  16. package/package.json +53 -27
  17. package/src/CodeInput.tsx +72 -272
  18. package/src/LanguageField.tsx +33 -0
  19. package/src/LanguageInput.tsx +32 -0
  20. package/src/PreviewCode.tsx +40 -68
  21. package/src/__workshop__/index.ts +22 -0
  22. package/src/__workshop__/lazy.tsx +54 -0
  23. package/src/__workshop__/preview.tsx +24 -0
  24. package/src/__workshop__/props.tsx +24 -0
  25. package/src/codemirror/CodeMirrorProxy.tsx +157 -0
  26. package/src/codemirror/CodeModeContext.tsx +4 -0
  27. package/src/codemirror/defaultCodeModes.ts +109 -0
  28. package/src/codemirror/extensions/highlightLineExtension.ts +164 -0
  29. package/src/codemirror/extensions/theme.ts +61 -0
  30. package/src/codemirror/extensions/useCodeMirrorTheme.ts +63 -0
  31. package/src/codemirror/extensions/useFontSize.ts +24 -0
  32. package/src/codemirror/useCodeMirror-client.test.tsx +49 -0
  33. package/src/{ace-editor/AceEditor-server.test.tsx → codemirror/useCodeMirror-server.test.tsx} +3 -4
  34. package/src/codemirror/useCodeMirror.tsx +12 -0
  35. package/src/codemirror/useLanguageMode.tsx +52 -0
  36. package/src/config.ts +1 -13
  37. package/src/getMedia.tsx +0 -2
  38. package/src/index.ts +4 -11
  39. package/src/plugin.tsx +39 -0
  40. package/src/schema.tsx +3 -7
  41. package/src/types.ts +19 -3
  42. package/src/ui/focusRingStyle.ts +27 -0
  43. package/src/useFieldMember.ts +16 -0
  44. package/lib/_chunks/editorSupport-895caf32.esm.js +0 -2
  45. package/lib/_chunks/editorSupport-895caf32.esm.js.map +0 -1
  46. package/lib/_chunks/editorSupport-bda3d360.js +0 -2
  47. package/lib/_chunks/editorSupport-bda3d360.js.map +0 -1
  48. package/src/ace-editor/AceEditor-client.test.tsx +0 -37
  49. package/src/ace-editor/AceEditorLazy.tsx +0 -19
  50. package/src/ace-editor/editorSupport.ts +0 -34
  51. package/src/ace-editor/groq.ts +0 -630
  52. package/src/createHighlightMarkers.ts +0 -24
@@ -1,630 +0,0 @@
1
- /* eslint-disable no-undef */
2
-
3
- export {}
4
-
5
- // Grammar from https://github.com/sanity-io/vscode-sanity
6
- const rules = {
7
- start: [
8
- {
9
- include: '#query',
10
- },
11
- {
12
- include: '#value',
13
- },
14
- {
15
- include: '#pair',
16
- },
17
- ],
18
- '#query': [
19
- {
20
- include: '#nullary-access-operator',
21
- },
22
- {
23
- include: '#arraylike',
24
- },
25
- {
26
- include: '#pipe',
27
- },
28
- {
29
- include: '#sort-order',
30
- },
31
- {
32
- include: '#filter',
33
- },
34
- ],
35
- '#variable': [
36
- {
37
- token: 'variable.other.groq',
38
- regex: /\$[_A-Za-z][_0-9A-Za-z]*/,
39
- },
40
- ],
41
- '#keyword': [
42
- {
43
- token: 'keyword.other.groq',
44
- regex: /\b(?:asc|desc|in|match)\b/,
45
- },
46
- ],
47
- '#comparison': [
48
- {
49
- token: 'keyword.operator.comparison.groq',
50
- // eslint-disable-next-line no-div-regex
51
- regex: /==|!=|>=|<=|<!=>|<|>/,
52
- },
53
- ],
54
- '#operator': [
55
- {
56
- token: 'keyword.operator.arithmetic.groq',
57
- regex: /\+|-|\*{1,2}|\/|%/,
58
- },
59
- ],
60
- '#pipe': [
61
- {
62
- token: 'keyword.operator.pipe.groq',
63
- regex: /\|/,
64
- },
65
- ],
66
- '#logical': [
67
- {
68
- token: 'keyword.operator.logical.groq',
69
- regex: /!|&&|\|\|/,
70
- },
71
- ],
72
- '#reference': [
73
- {
74
- token: 'keyword.operator.reference.groq',
75
- regex: /->/,
76
- },
77
- ],
78
- '#pair': [
79
- {
80
- include: '#identifier',
81
- },
82
- {
83
- include: '#value',
84
- },
85
- {
86
- include: '#filter',
87
- },
88
- {
89
- token: 'keyword.operator.pair.groq',
90
- regex: /[=]>/,
91
- },
92
- ],
93
- '#arraylike': [
94
- {
95
- token: 'punctuation.definition.bracket.begin.groq',
96
- regex: /\[/,
97
- push: [
98
- {
99
- token: ['text', 'keyword.operator.descendant.groq'],
100
- regex: /(\])((?:\s*\.)?)/,
101
- next: 'pop',
102
- },
103
- {
104
- include: '#range',
105
- },
106
- {
107
- include: '#filter',
108
- },
109
- {
110
- include: '#array-values',
111
- },
112
- ],
113
- },
114
- ],
115
- '#array': [
116
- {
117
- token: 'punctuation.definition.bracket.begin.groq',
118
- regex: /\[/,
119
- push: [
120
- {
121
- token: 'punctuation.definition.bracket.end.groq',
122
- regex: /\]/,
123
- next: 'pop',
124
- },
125
- {
126
- include: '#array-values',
127
- },
128
- {
129
- defaultToken: 'meta.structure.array.groq',
130
- },
131
- ],
132
- },
133
- ],
134
- '#range': [
135
- {
136
- token: [
137
- 'meta.structure.range.groq',
138
- 'constant.numeric.groq',
139
- 'meta.structure.range.groq',
140
- 'keyword.operator.range.groq',
141
- 'meta.structure.range.groq',
142
- 'constant.numeric.groq',
143
- 'meta.structure.range.groq',
144
- ],
145
- regex: /(\s*)(\d+)(\s*)(\.{2,3})(\s*)(\d+)(\s*)/,
146
- },
147
- ],
148
- '#spread': [
149
- {
150
- token: 'punctuation.definition.spread.begin.groq',
151
- regex: /\.\.\./,
152
- push: [
153
- {
154
- include: '#array',
155
- },
156
- {
157
- include: '#function-call',
158
- },
159
- {
160
- include: '#projection',
161
- },
162
- {
163
- token: 'punctuation.definition.spread.end.groq',
164
- regex: /(?=.)/,
165
- next: 'pop',
166
- },
167
- {
168
- defaultToken: 'meta.structure.spread.groq',
169
- },
170
- ],
171
- },
172
- ],
173
- '#array-values': [
174
- {
175
- include: '#value',
176
- },
177
- {
178
- include: '#spread',
179
- },
180
- {
181
- token: 'punctuation.separator.array.groq',
182
- regex: /,/,
183
- },
184
- {
185
- token: 'invalid.illegal.expected-array-separator.groq',
186
- regex: /[^\s\]]/,
187
- },
188
- ],
189
- '#filter': [
190
- {
191
- include: '#function-call',
192
- },
193
- {
194
- include: '#keyword',
195
- },
196
- {
197
- include: '#constant',
198
- },
199
- {
200
- include: '#identifier',
201
- },
202
- {
203
- include: '#value',
204
- },
205
- {
206
- include: '#comparison',
207
- },
208
- {
209
- include: '#operator',
210
- },
211
- {
212
- include: '#logical',
213
- },
214
- ],
215
- '#comments': [
216
- {
217
- token: ['punctuation.definition.comment.groq', 'comment.line.double-slash.js'],
218
- regex: /(\/\/)(.*$)/,
219
- },
220
- ],
221
- '#nullary-access-operator': [
222
- {
223
- token: 'constant.language.groq',
224
- regex: /[*@^]/,
225
- },
226
- ],
227
- '#constant': [
228
- {
229
- token: 'constant.language.groq',
230
- regex: /\b(?:true|false|null)\b/,
231
- },
232
- ],
233
- '#number': [
234
- {
235
- token: 'constant.numeric.groq',
236
- regex: /-?(?:0|[1-9]\d*)(?:(?:\.\d+)?(?:[eE][+-]?\d+)?)?/,
237
- },
238
- ],
239
- '#named-projection': [
240
- {
241
- include: '#identifier',
242
- },
243
- {
244
- include: '#objectkey',
245
- },
246
- {
247
- include: '#projection',
248
- },
249
- ],
250
- '#projection': [
251
- {
252
- token: 'punctuation.definition.projection.begin.groq',
253
- regex: /\{/,
254
- push: [
255
- {
256
- token: 'punctuation.definition.projection.end.groq',
257
- regex: /\}/,
258
- next: 'pop',
259
- },
260
- {
261
- include: '#identifier',
262
- },
263
- {
264
- include: '#objectkey',
265
- },
266
- {
267
- include: '#named-projection',
268
- },
269
- {
270
- include: '#comments',
271
- },
272
- {
273
- include: '#spread',
274
- },
275
- {
276
- include: '#pair',
277
- },
278
- {
279
- token: 'punctuation.separator.projection.key-value.groq',
280
- regex: /:/,
281
- push: [
282
- {
283
- token: 'punctuation.separator.projection.pair.groq',
284
- regex: /,|(?=\})/,
285
- next: 'pop',
286
- },
287
- {
288
- include: '#nullary-access-operator',
289
- },
290
- {
291
- include: '#arraylike',
292
- },
293
- {
294
- include: '#value',
295
- },
296
- {
297
- include: '#spread',
298
- },
299
- {
300
- include: '#identifier',
301
- },
302
- {
303
- include: '#operator',
304
- },
305
- {
306
- include: '#comparison',
307
- },
308
- {
309
- include: '#pair',
310
- },
311
- {
312
- token: 'invalid.illegal.expected-projection-separator.groq',
313
- regex: /[^\s,]/,
314
- },
315
- {
316
- defaultToken: 'meta.structure.projection.value.groq',
317
- },
318
- ],
319
- },
320
- {
321
- token: 'invalid.illegal.expected-projection-separator.groq',
322
- regex: /[^\s},]/,
323
- },
324
- {
325
- defaultToken: 'meta.structure.projection.groq',
326
- },
327
- ],
328
- },
329
- ],
330
- '#string': [
331
- {
332
- include: '#single-string',
333
- },
334
- {
335
- include: '#double-string',
336
- },
337
- ],
338
- '#double-string': [
339
- {
340
- token: 'punctuation.definition.string.begin.groq',
341
- regex: /"/,
342
- push: [
343
- {
344
- token: 'punctuation.definition.string.end.groq',
345
- regex: /"/,
346
- next: 'pop',
347
- },
348
- {
349
- include: '#stringcontent',
350
- },
351
- {
352
- defaultToken: 'string.quoted.double.groq',
353
- },
354
- ],
355
- },
356
- ],
357
- '#single-string': [
358
- {
359
- token: 'punctuation.definition.string.single.begin.groq',
360
- regex: /'/,
361
- push: [
362
- {
363
- token: 'punctuation.definition.string.single.end.groq',
364
- regex: /'/,
365
- next: 'pop',
366
- },
367
- {
368
- include: '#stringcontent',
369
- },
370
- {
371
- defaultToken: 'string.quoted.single.groq',
372
- },
373
- ],
374
- },
375
- ],
376
- '#objectkey': [
377
- {
378
- include: '#string',
379
- },
380
- ],
381
- '#stringcontent': [
382
- {
383
- token: 'constant.character.escape.groq',
384
- regex: /\\(?:["\\/bfnrt]|u[0-9a-fA-F]{4})/,
385
- },
386
- {
387
- token: 'invalid.illegal.unrecognized-string-escape.groq',
388
- regex: /\\./,
389
- },
390
- ],
391
- '#sort-pair': [
392
- {
393
- token: ['variable.other.readwrite.groq', 'text', 'keyword.other.groq'],
394
- regex: /([_A-Za-z][_0-9A-Za-z]*)(?:(\s*)(asc|desc))?/,
395
- },
396
- {
397
- token: ['constant.language.groq', 'punctuation.definition.bracket.begin.groq'],
398
- regex: /(@)(\[)/,
399
- push: [
400
- {
401
- token: ['punctuation.definition.bracket.begin.groq', 'text', 'keyword.other.groq'],
402
- regex: /(\])(?:(\s*)(asc|desc))?/,
403
- next: 'pop',
404
- },
405
- {
406
- include: '#string',
407
- },
408
- ],
409
- },
410
- ],
411
- '#sort-order': [
412
- {
413
- token: 'support.function.sortorder.begin.groq',
414
- regex: /\border\s*\(/,
415
- push: [
416
- {
417
- token: 'support.function.sortorder.end.groq',
418
- regex: /\)/,
419
- next: 'pop',
420
- },
421
- {
422
- include: '#sort-pair',
423
- },
424
- {
425
- token: 'punctuation.separator.array.groq',
426
- regex: /,/,
427
- },
428
- {
429
- token: 'invalid.illegal.expected-sort-separator.groq',
430
- regex: /[^\s\]]/,
431
- },
432
- {
433
- defaultToken: 'support.function.sortorder.groq',
434
- },
435
- ],
436
- },
437
- ],
438
- '#function-call': [
439
- {
440
- include: '#function-var-arg',
441
- },
442
- {
443
- include: '#function-single-arg',
444
- },
445
- {
446
- include: '#function-round',
447
- },
448
- ],
449
- '#function-var-arg': [
450
- {
451
- token: 'support.function.vararg.begin.groq',
452
- regex: /\b(?:coalesce|select)\s*\(/,
453
- push: [
454
- {
455
- token: 'support.function.vararg.end.groq',
456
- regex: /\)/,
457
- next: 'pop',
458
- },
459
- {
460
- include: '#value',
461
- },
462
- {
463
- include: '#identifier',
464
- },
465
- {
466
- include: '#filter',
467
- },
468
- {
469
- include: '#pair',
470
- },
471
- {
472
- token: 'punctuation.separator.array.groq',
473
- regex: /,/,
474
- },
475
- {
476
- defaultToken: 'support.function.vararg.groq',
477
- },
478
- ],
479
- },
480
- ],
481
- '#function-single-arg': [
482
- {
483
- token: 'support.function.singlearg.begin.groq',
484
- regex: /\b(?:count|defined|length|path|references)\s*\(/,
485
- push: [
486
- {
487
- token: 'support.function.singlearg.end.groq',
488
- regex: /\)/,
489
- next: 'pop',
490
- },
491
- {
492
- include: '#query',
493
- },
494
- {
495
- include: '#identifier',
496
- },
497
- {
498
- include: '#value',
499
- },
500
- {
501
- include: '#pair',
502
- },
503
- {
504
- defaultToken: 'support.function.singlearg.groq',
505
- },
506
- ],
507
- },
508
- ],
509
- '#identifier': [
510
- {
511
- token: [
512
- 'variable.other.readwrite.groq',
513
- 'text',
514
- 'punctuation.definition.block.js',
515
- 'text',
516
- 'keyword.operator.reference.groq',
517
- ],
518
- regex: /([_A-Za-z][_0-9A-Za-z]*)(\s*)((?:\[\s*\])?)(\s*)(->)/,
519
- },
520
- {
521
- token: [
522
- 'variable.other.readwrite.groq',
523
- 'constant.language.groq',
524
- 'text',
525
- 'punctuation.definition.block.js',
526
- 'text',
527
- 'keyword.operator.descendant.groq',
528
- ],
529
- regex: /(?:([_A-Za-z][_0-9A-Za-z]*)|([@^]))(\s*)((?:\[\s*\])?)(\s*)(\.)/,
530
- },
531
- {
532
- token: 'variable.other.readwrite.groq',
533
- regex: /[_A-Za-z][_0-9A-Za-z]*/,
534
- },
535
- ],
536
- '#value': [
537
- {
538
- include: '#constant',
539
- },
540
- {
541
- include: '#number',
542
- },
543
- {
544
- include: '#string',
545
- },
546
- {
547
- include: '#array',
548
- },
549
- {
550
- include: '#variable',
551
- },
552
- {
553
- include: '#projection',
554
- },
555
- {
556
- include: '#comments',
557
- },
558
- {
559
- include: '#function-call',
560
- },
561
- ],
562
- }
563
-
564
- declare let ace: any
565
-
566
- ace.define(
567
- 'ace/mode/groq_highlight_rules',
568
- ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
569
- (acequire: (id: string) => any, exports: Record<string, unknown>, _module: any) => {
570
- const oop = acequire('../lib/oop')
571
- const TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules
572
-
573
- const GroqHighlightRules = function () {
574
- /* eslint-disable @typescript-eslint/ban-ts-comment */
575
- // @ts-ignore
576
- this.$rules = rules
577
- // @ts-ignore
578
- this.normalizeRules()
579
- /* eslint-enable @typescript-eslint/ban-ts-comment */
580
- }
581
-
582
- oop.inherits(GroqHighlightRules, TextHighlightRules)
583
-
584
- exports.GroqHighlightRules = GroqHighlightRules
585
- }
586
- )
587
-
588
- ace.define(
589
- 'ace/mode/groq',
590
- [
591
- 'require',
592
- 'exports',
593
- 'module',
594
- 'ace/lib/oop',
595
- 'ace/mode/text',
596
- 'ace/tokenizer',
597
- 'ace/mode/groq_highlight_rules',
598
- 'ace/mode/folding/cstyle',
599
- ],
600
- (acequire: (id: string) => any, exports: Record<string, unknown>, _module: any) => {
601
- // eslint-disable-next-line strict
602
- 'use strict'
603
- const oop = acequire('../lib/oop')
604
- const TextMode = acequire('./text').Mode
605
- const Tokenizer = acequire('../tokenizer').Tokenizer
606
- const GroqHighlightRules = acequire('./groq_highlight_rules').GroqHighlightRules
607
- const FoldMode = acequire('./folding/cstyle').FoldMode
608
-
609
- const Mode = function () {
610
- /* eslint-disable @typescript-eslint/ban-ts-comment */
611
- const highlighter = new GroqHighlightRules()
612
- // @ts-ignore
613
- this.foldingRules = new FoldMode()
614
- // @ts-ignore
615
- this.$tokenizer = new Tokenizer(highlighter.getRules())
616
- // @ts-ignore
617
- this.$keywordList = highlighter.$keywordList
618
- /* eslint-enable @typescript-eslint/ban-ts-comment */
619
- }
620
- oop.inherits(Mode, TextMode)
621
- ;(function () {
622
- /* eslint-disable @typescript-eslint/ban-ts-comment */
623
- // @ts-ignore
624
- this.lineCommentStart = "'"
625
- /* eslint-enable @typescript-eslint/ban-ts-comment */
626
- }.call(Mode.prototype))
627
-
628
- exports.Mode = Mode
629
- }
630
- )
@@ -1,24 +0,0 @@
1
- import type {IMarker} from 'react-ace'
2
- import {css} from 'styled-components'
3
-
4
- export const highlightMarkersCSS = css`
5
- .ace_editor_markers_highlight {
6
- position: absolute;
7
- background-color: ${({theme}) => theme.sanity.color.solid.primary.enabled.bg};
8
- opacity: 0.2;
9
- width: 100% !important;
10
- border-radius: 0 !important;
11
- }
12
- `
13
-
14
- export default function createHighlightMarkers(rows: number[]): IMarker[] {
15
- return rows.map((row) => ({
16
- startRow: Number(row) - 1,
17
- startCol: 0,
18
- endRow: Number(row) - 1,
19
- endCol: +Infinity,
20
- className: 'ace_editor_markers_highlight',
21
- type: 'screenLine',
22
- inFront: true,
23
- }))
24
- }