@git-diff-view/react 0.1.3 → 0.1.5

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 (59) hide show
  1. package/dist/cjs/index.development.js +497 -503
  2. package/dist/cjs/index.development.js.map +1 -1
  3. package/dist/cjs/index.production.js +497 -503
  4. package/dist/cjs/index.production.js.map +1 -1
  5. package/dist/css/diff-view-pure.css +111 -0
  6. package/dist/css/diff-view.css +111 -0
  7. package/dist/esm/index.mjs +499 -506
  8. package/dist/esm/index.mjs.map +1 -1
  9. package/index.d.ts +239 -7
  10. package/package.json +2 -2
  11. package/src/_com.css +99 -0
  12. package/src/components/DiffAddWidget.tsx +4 -3
  13. package/src/components/DiffContent.tsx +6 -6
  14. package/src/components/DiffExpand.tsx +0 -2
  15. package/src/components/DiffNoNewLine.tsx +0 -2
  16. package/src/components/DiffSplitContentLineNormal.tsx +3 -4
  17. package/src/components/DiffSplitContentLineWrap.tsx +9 -10
  18. package/src/components/DiffSplitExtendLineNormal.tsx +3 -3
  19. package/src/components/DiffSplitExtendLineWrap.tsx +4 -4
  20. package/src/components/DiffSplitHunkLineNormal.tsx +0 -1
  21. package/src/components/DiffSplitHunkLineWrap.tsx +0 -1
  22. package/src/components/DiffSplitView.tsx +0 -1
  23. package/src/components/DiffSplitViewNormal.tsx +13 -12
  24. package/src/components/DiffSplitViewWrap.tsx +10 -10
  25. package/src/components/DiffSplitWidgetLineNormal.tsx +2 -2
  26. package/src/components/DiffSplitWidgetLineWrap.tsx +12 -2
  27. package/src/components/DiffUnifiedContentLine.tsx +1 -2
  28. package/src/components/DiffUnifiedExtendLine.tsx +4 -5
  29. package/src/components/DiffUnifiedHunkLine.tsx +0 -1
  30. package/src/components/DiffUnifiedView.tsx +9 -9
  31. package/src/components/DiffUnifiedWidgetLine.tsx +2 -2
  32. package/src/components/DiffView.tsx +26 -20
  33. package/src/components/DiffViewContext.ts +2 -0
  34. package/src/components/DiffViewWithMultiSelect.tsx +321 -0
  35. package/src/components/DiffWidgetContext.ts +4 -2
  36. package/src/components/tools.ts +6 -5
  37. package/src/components/v2/DiffSplitContentLineNormal_v2.tsx +4 -5
  38. package/src/components/v2/DiffSplitContentLineWrap_v2.tsx +11 -12
  39. package/src/components/v2/DiffSplitExtendLineNormal_v2.tsx +3 -3
  40. package/src/components/v2/DiffSplitExtendLineWrap_v2.tsx +4 -4
  41. package/src/components/v2/DiffSplitHunkLineNormal_v2.tsx +0 -1
  42. package/src/components/v2/DiffSplitHunkLineWrap_v2.tsx +0 -1
  43. package/src/components/v2/DiffSplitViewLineNormal_v2.tsx +0 -1
  44. package/src/components/v2/DiffSplitViewLineWrap_v2.tsx +0 -1
  45. package/src/components/v2/DiffSplitViewNormal_v2.tsx +9 -8
  46. package/src/components/v2/DiffSplitViewWrap_v2.tsx +5 -5
  47. package/src/components/v2/DiffSplitView_v2.tsx +0 -1
  48. package/src/components/v2/DiffSplitWidgetLineNormal_v2.tsx +2 -3
  49. package/src/components/v2/DiffSplitWidgetLineWrap_v2.tsx +4 -5
  50. package/src/hooks/useCallbackRef.ts +13 -0
  51. package/src/hooks/useDomWidth.ts +5 -5
  52. package/src/hooks/useIsMounted.ts +1 -0
  53. package/src/hooks/useSyncHeight.ts +3 -3
  54. package/src/hooks/useTextWidth.ts +1 -1
  55. package/src/hooks/useUnmount.ts +1 -0
  56. package/src/hooks/useUpdateEffect.ts +15 -0
  57. package/src/index.ts +1 -2
  58. package/styles/diff-view-pure.css +111 -0
  59. package/styles/diff-view.css +111 -0
package/dist/css/diff-view-pure.css CHANGED
@@ -1,27 +1,45 @@
1
+ .diff-tailwindcss-wrapper .\!container {
2
+ width: 100% !important;
3
+ }
1
4
  .diff-tailwindcss-wrapper .container {
2
5
  width: 100%;
3
6
  }
4
7
  @media (min-width: 640px) {
8
+ .diff-tailwindcss-wrapper .\!container {
9
+ max-width: 640px !important;
10
+ }
5
11
  .diff-tailwindcss-wrapper .container {
6
12
  max-width: 640px;
7
13
  }
8
14
  }
9
15
  @media (min-width: 768px) {
16
+ .diff-tailwindcss-wrapper .\!container {
17
+ max-width: 768px !important;
18
+ }
10
19
  .diff-tailwindcss-wrapper .container {
11
20
  max-width: 768px;
12
21
  }
13
22
  }
14
23
  @media (min-width: 1024px) {
24
+ .diff-tailwindcss-wrapper .\!container {
25
+ max-width: 1024px !important;
26
+ }
15
27
  .diff-tailwindcss-wrapper .container {
16
28
  max-width: 1024px;
17
29
  }
18
30
  }
19
31
  @media (min-width: 1280px) {
32
+ .diff-tailwindcss-wrapper .\!container {
33
+ max-width: 1280px !important;
34
+ }
20
35
  .diff-tailwindcss-wrapper .container {
21
36
  max-width: 1280px;
22
37
  }
23
38
  }
24
39
  @media (min-width: 1536px) {
40
+ .diff-tailwindcss-wrapper .\!container {
41
+ max-width: 1536px !important;
42
+ }
25
43
  .diff-tailwindcss-wrapper .container {
26
44
  max-width: 1536px;
27
45
  }
@@ -408,12 +426,105 @@
408
426
  .diff-tailwindcss-wrapper .diff-widget-tooltip:hover::after {
409
427
  display: block;
410
428
  }
429
+ .diff-line-extend-wrapper,
430
+ .diff-line-widget-wrapper {
431
+ display: flow-root;
432
+ }
411
433
  .diff-line-extend-wrapper * {
412
434
  color: initial;
413
435
  }
414
436
  .diff-line-widget-wrapper * {
415
437
  color: initial;
416
438
  }
439
+ /* Multi-select styles for line range selection */
440
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num,
441
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num,
442
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num {
443
+ z-index: 2;
444
+ }
445
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-content,
446
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-content,
447
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-content {
448
+ position: relative;
449
+ }
450
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num::after,
451
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num::after,
452
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num::after {
453
+ content: "";
454
+ position: absolute;
455
+ z-index: 1;
456
+ inset: 0;
457
+ opacity: 0.15;
458
+ background-color: var(--diff-multi-select-bg, #f0c000);
459
+ pointer-events: none;
460
+ }
461
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num::before,
462
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num::before,
463
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num::before {
464
+ content: "";
465
+ z-index: 2;
466
+ position: absolute;
467
+ top: 0;
468
+ bottom: 0;
469
+ right: -2px;
470
+ width: 4px;
471
+ background-color: var(--diff-multi-select-border, #2588fa);
472
+ }
473
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-content::after,
474
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-content::after,
475
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-content::after {
476
+ content: "";
477
+ position: absolute;
478
+ z-index: 1;
479
+ inset: 0;
480
+ opacity: 0.15;
481
+ background-color: var(--diff-multi-select-bg, #f0c000);
482
+ pointer-events: none;
483
+ }
484
+ /* Multi-select: ensure proper positioning for line number cells */
485
+ .diff-multi-selecting .diff-line-old-num,
486
+ .diff-multi-selecting .diff-line-new-num,
487
+ .diff-multi-selecting .diff-line-num {
488
+ -webkit-user-select: none;
489
+ -moz-user-select: none;
490
+ user-select: none;
491
+ }
492
+ .diff-multi-selecting .diff-line-old-content,
493
+ .diff-multi-selecting .diff-line-new-content,
494
+ .diff-multi-selecting .diff-line-content {
495
+ -webkit-user-select: none;
496
+ -moz-user-select: none;
497
+ user-select: none;
498
+ }
499
+ /* Prevent text selection during multi-line selection */
500
+ .diff-multi-selecting {
501
+ -webkit-user-select: none;
502
+ -moz-user-select: none;
503
+ user-select: none;
504
+ }
505
+ .diff-multi-selecting * {
506
+ -webkit-user-select: none;
507
+ -moz-user-select: none;
508
+ user-select: none;
509
+ }
510
+ /* Hide addWidget button during active dragging selection */
511
+ .diff-multi-selecting .diff-add-widget-wrapper {
512
+ display: none;
513
+ }
514
+ /* Ensure addWidget button is above selection overlay */
515
+ .diff-multiselect-wrapper .diff-add-widget-wrapper {
516
+ z-index: 10 !important;
517
+ }
518
+ /* Line number span should not interfere with click events */
519
+ .diff-tailwindcss-wrapper .diff-line-new-num span[data-line-num],
520
+ .diff-tailwindcss-wrapper .diff-line-old-num span[data-line-num] {
521
+ pointer-events: none;
522
+ }
523
+ .diff-multiselect-wrapper .diff-line-old-num,
524
+ .diff-multiselect-wrapper .diff-line-new-num,
525
+ .diff-multiselect-wrapper .diff-line-num {
526
+ cursor: pointer;
527
+ }
417
528
  .diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw pre code.hljs {
418
529
  display: block;
419
530
  overflow-x: auto;
package/dist/css/diff-view.css CHANGED
@@ -1,27 +1,45 @@
1
+ .diff-tailwindcss-wrapper .\!container {
2
+ width: 100% !important;
3
+ }
1
4
  .diff-tailwindcss-wrapper .container {
2
5
  width: 100%;
3
6
  }
4
7
  @media (min-width: 640px) {
8
+ .diff-tailwindcss-wrapper .\!container {
9
+ max-width: 640px !important;
10
+ }
5
11
  .diff-tailwindcss-wrapper .container {
6
12
  max-width: 640px;
7
13
  }
8
14
  }
9
15
  @media (min-width: 768px) {
16
+ .diff-tailwindcss-wrapper .\!container {
17
+ max-width: 768px !important;
18
+ }
10
19
  .diff-tailwindcss-wrapper .container {
11
20
  max-width: 768px;
12
21
  }
13
22
  }
14
23
  @media (min-width: 1024px) {
24
+ .diff-tailwindcss-wrapper .\!container {
25
+ max-width: 1024px !important;
26
+ }
15
27
  .diff-tailwindcss-wrapper .container {
16
28
  max-width: 1024px;
17
29
  }
18
30
  }
19
31
  @media (min-width: 1280px) {
32
+ .diff-tailwindcss-wrapper .\!container {
33
+ max-width: 1280px !important;
34
+ }
20
35
  .diff-tailwindcss-wrapper .container {
21
36
  max-width: 1280px;
22
37
  }
23
38
  }
24
39
  @media (min-width: 1536px) {
40
+ .diff-tailwindcss-wrapper .\!container {
41
+ max-width: 1536px !important;
42
+ }
25
43
  .diff-tailwindcss-wrapper .container {
26
44
  max-width: 1536px;
27
45
  }
@@ -408,12 +426,105 @@
408
426
  .diff-tailwindcss-wrapper .diff-widget-tooltip:hover::after {
409
427
  display: block;
410
428
  }
429
+ .diff-line-extend-wrapper,
430
+ .diff-line-widget-wrapper {
431
+ display: flow-root;
432
+ }
411
433
  .diff-line-extend-wrapper * {
412
434
  color: initial;
413
435
  }
414
436
  .diff-line-widget-wrapper * {
415
437
  color: initial;
416
438
  }
439
+ /* Multi-select styles for line range selection */
440
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num,
441
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num,
442
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num {
443
+ z-index: 2;
444
+ }
445
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-content,
446
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-content,
447
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-content {
448
+ position: relative;
449
+ }
450
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num::after,
451
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num::after,
452
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num::after {
453
+ content: "";
454
+ position: absolute;
455
+ z-index: 1;
456
+ inset: 0;
457
+ opacity: 0.15;
458
+ background-color: var(--diff-multi-select-bg, #f0c000);
459
+ pointer-events: none;
460
+ }
461
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-num::before,
462
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-num::before,
463
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-num::before {
464
+ content: "";
465
+ z-index: 2;
466
+ position: absolute;
467
+ top: 0;
468
+ bottom: 0;
469
+ right: -2px;
470
+ width: 4px;
471
+ background-color: var(--diff-multi-select-border, #2588fa);
472
+ }
473
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-new-content::after,
474
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-old-content::after,
475
+ .diff-tailwindcss-wrapper .diff-multi-select-active.diff-line-content::after {
476
+ content: "";
477
+ position: absolute;
478
+ z-index: 1;
479
+ inset: 0;
480
+ opacity: 0.15;
481
+ background-color: var(--diff-multi-select-bg, #f0c000);
482
+ pointer-events: none;
483
+ }
484
+ /* Multi-select: ensure proper positioning for line number cells */
485
+ .diff-multi-selecting .diff-line-old-num,
486
+ .diff-multi-selecting .diff-line-new-num,
487
+ .diff-multi-selecting .diff-line-num {
488
+ -webkit-user-select: none;
489
+ -moz-user-select: none;
490
+ user-select: none;
491
+ }
492
+ .diff-multi-selecting .diff-line-old-content,
493
+ .diff-multi-selecting .diff-line-new-content,
494
+ .diff-multi-selecting .diff-line-content {
495
+ -webkit-user-select: none;
496
+ -moz-user-select: none;
497
+ user-select: none;
498
+ }
499
+ /* Prevent text selection during multi-line selection */
500
+ .diff-multi-selecting {
501
+ -webkit-user-select: none;
502
+ -moz-user-select: none;
503
+ user-select: none;
504
+ }
505
+ .diff-multi-selecting * {
506
+ -webkit-user-select: none;
507
+ -moz-user-select: none;
508
+ user-select: none;
509
+ }
510
+ /* Hide addWidget button during active dragging selection */
511
+ .diff-multi-selecting .diff-add-widget-wrapper {
512
+ display: none;
513
+ }
514
+ /* Ensure addWidget button is above selection overlay */
515
+ .diff-multiselect-wrapper .diff-add-widget-wrapper {
516
+ z-index: 10 !important;
517
+ }
518
+ /* Line number span should not interfere with click events */
519
+ .diff-tailwindcss-wrapper .diff-line-new-num span[data-line-num],
520
+ .diff-tailwindcss-wrapper .diff-line-old-num span[data-line-num] {
521
+ pointer-events: none;
522
+ }
523
+ .diff-multiselect-wrapper .diff-line-old-num,
524
+ .diff-multiselect-wrapper .diff-line-new-num,
525
+ .diff-multiselect-wrapper .diff-line-num {
526
+ cursor: pointer;
527
+ }
417
528
  .diff-tailwindcss-wrapper[data-theme="light"] .diff-line-syntax-raw pre code.hljs {
418
529
  display: block;
419
530
  overflow-x: auto;