@thangph2146/lexical-editor 0.0.6 → 0.0.9

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.
@@ -89,7 +89,7 @@
89
89
  .editor-tabs-trigger[data-state=active] {
90
90
  background-color: var(--background);
91
91
  color: var(--foreground);
92
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
92
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
93
93
  }
94
94
  .editor-tabs-list {
95
95
  display: flex;
@@ -174,12 +174,14 @@
174
174
  .editor-flex-row {
175
175
  flex-direction: row;
176
176
  }
177
+ .editor-flex-column,
177
178
  .editor-flex-col {
178
179
  flex-direction: column;
179
180
  }
180
181
  .editor-flex-row-reverse {
181
182
  flex-direction: row-reverse;
182
183
  }
184
+ .editor-flex-column-reverse,
183
185
  .editor-flex-col-reverse {
184
186
  flex-direction: column-reverse;
185
187
  }
@@ -209,13 +211,13 @@
209
211
  cursor: pointer;
210
212
  }
211
213
  .editor-flex-col-gap-2 {
212
- display: flex;
213
- flex-direction: column;
214
+ display: flex !important;
215
+ flex-direction: column !important;
214
216
  gap: 8px;
215
217
  }
216
218
  .editor-flex-col-gap-4 {
217
- display: flex;
218
- flex-direction: column;
219
+ display: flex !important;
220
+ flex-direction: column !important;
219
221
  gap: 16px;
220
222
  }
221
223
  .editor-flex-center-justify-py-8 {
@@ -370,13 +372,13 @@
370
372
  border-radius: 9999px;
371
373
  }
372
374
  .editor-shadow-sm {
373
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
375
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
374
376
  }
375
377
  .editor-shadow-md {
376
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
378
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
377
379
  }
378
380
  .editor-shadow-lg {
379
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
381
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
380
382
  }
381
383
  .editor-bg-background {
382
384
  background-color: var(--background);
@@ -718,7 +720,7 @@
718
720
  .editor-cursor-nwse-resize {
719
721
  cursor: nwse-resize;
720
722
  }
721
- .editor-text-muted-xs {
723
+ .editor-text-xs-muted {
722
724
  font-size: 0.75rem;
723
725
  color: var(--muted-foreground, #64748b);
724
726
  }
@@ -870,7 +872,7 @@
870
872
  .editor-toolbar-item:hover:not(:disabled):not([data-state=on]):not([data-state=active]),
871
873
  .editor-toggle-group-item:hover:not(:disabled):not([data-state=on]):not([data-state=active]) {
872
874
  transform: translateY(-1px);
873
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
875
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
874
876
  }
875
877
  .editor-toolbar-item:active:not(:disabled),
876
878
  .editor-toggle-group-item:active:not(:disabled) {
@@ -916,7 +918,7 @@
916
918
  .editor-toggle-group-item[data-state=on]:hover,
917
919
  .editor-toggle-group-item[data-state=active]:hover {
918
920
  transform: translateY(-1px);
919
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
921
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
920
922
  background-color: color-mix(in srgb, var(--accent, #f1f5f9), black 10%);
921
923
  border-color: var(--accent, #f1f5f9);
922
924
  }
@@ -971,7 +973,7 @@
971
973
  }
972
974
  .editor-toolbar-select-trigger:hover:not(:disabled):not([data-state=on]):not([data-state=active]) {
973
975
  transform: translateY(-1px);
974
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
976
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
975
977
  }
976
978
  .editor-toolbar-select-trigger:active:not(:disabled) {
977
979
  transform: translateY(0) scale(0.98);
@@ -1023,10 +1025,11 @@
1023
1025
  position: relative;
1024
1026
  padding: 8px 16px;
1025
1027
  box-sizing: border-box;
1028
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
1026
1029
  }
1027
1030
  .editor-btn:hover:not(:disabled):not([data-state=on]):not([data-state=active]) {
1028
1031
  transform: translateY(-1px);
1029
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1032
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
1030
1033
  }
1031
1034
  .editor-btn:active:not(:disabled) {
1032
1035
  transform: translateY(0) scale(0.98);
@@ -1064,21 +1067,19 @@
1064
1067
  background-color: var(--primary);
1065
1068
  color: var(--primary-foreground);
1066
1069
  border-color: var(--primary);
1067
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1068
1070
  }
1069
1071
  .editor-btn--default:hover {
1070
1072
  background-color: color-mix(in srgb, var(--primary), black 10%);
1071
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1073
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
1072
1074
  }
1073
1075
  .editor-btn--destructive {
1074
1076
  background-color: var(--destructive);
1075
1077
  color: var(--destructive-foreground);
1076
1078
  border-color: var(--destructive);
1077
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1078
1079
  }
1079
1080
  .editor-btn--destructive:hover {
1080
1081
  background-color: color-mix(in srgb, var(--destructive), black 10%);
1081
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1082
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
1082
1083
  }
1083
1084
  .editor-btn--outline {
1084
1085
  border-color: var(--input);
@@ -1115,11 +1116,12 @@
1115
1116
  border: none;
1116
1117
  padding: 0;
1117
1118
  height: auto;
1119
+ box-shadow: none !important;
1118
1120
  }
1119
1121
  .editor-btn--link:hover {
1120
1122
  text-decoration-line: underline;
1121
1123
  transform: none;
1122
- box-shadow: none;
1124
+ box-shadow: none !important;
1123
1125
  }
1124
1126
  .editor-btn {
1125
1127
  }
@@ -1313,7 +1315,7 @@
1313
1315
  border: 1px solid var(--border);
1314
1316
  background-color: var(--background);
1315
1317
  padding: 20px;
1316
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
1318
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
1317
1319
  border-radius: calc(var(--radius, 8px) + 4px);
1318
1320
  outline: none;
1319
1321
  animation: editor-dialog-zoom-in 200ms cubic-bezier(0.4, 0, 0.2, 1) cubic-bezier(0.16, 1, 0.3, 1);
@@ -1340,8 +1342,8 @@
1340
1342
  box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background, transparent);
1341
1343
  }
1342
1344
  .editor-dialog-header {
1343
- display: flex;
1344
- flex-direction: column;
1345
+ display: flex !important;
1346
+ flex-direction: column !important;
1345
1347
  gap: 4px;
1346
1348
  text-align: center;
1347
1349
  }
@@ -1363,8 +1365,8 @@
1363
1365
  margin: 0;
1364
1366
  }
1365
1367
  .editor-dialog-footer {
1366
- display: flex;
1367
- flex-direction: column;
1368
+ display: flex !important;
1369
+ flex-direction: column !important;
1368
1370
  flex-direction: column-reverse;
1369
1371
  gap: 8px;
1370
1372
  }
@@ -1381,7 +1383,7 @@
1381
1383
  border: 1px solid var(--border);
1382
1384
  background-color: var(--popover);
1383
1385
  color: var(--popover-foreground);
1384
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1386
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
1385
1387
  padding: 16px;
1386
1388
  outline: none;
1387
1389
  animation: editor-popover-zoom-in 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -1505,7 +1507,7 @@
1505
1507
  }
1506
1508
  .editor-toggle:hover:not(:disabled):not([data-state=on]):not([data-state=active]) {
1507
1509
  transform: translateY(-1px);
1508
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1510
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
1509
1511
  }
1510
1512
  .editor-toggle:active:not(:disabled) {
1511
1513
  transform: translateY(0) scale(0.98);
@@ -1530,13 +1532,13 @@
1530
1532
  }
1531
1533
  .editor-toggle[data-state=on]:hover {
1532
1534
  transform: translateY(-1px);
1533
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1535
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
1534
1536
  background-color: color-mix(in srgb, var(--accent, #f1f5f9), black 10%);
1535
1537
  border-color: var(--accent, #f1f5f9);
1536
1538
  }
1537
1539
  .editor-toggle--outline {
1538
1540
  border-color: var(--input);
1539
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1541
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
1540
1542
  }
1541
1543
  .editor-toggle--outline:hover {
1542
1544
  background-color: color-mix(in srgb, var(--accent, #f1f5f9), black 5%);
@@ -1562,6 +1564,85 @@
1562
1564
  padding-left: 12px;
1563
1565
  padding-right: 12px;
1564
1566
  }
1567
+ .editor-number-input-container {
1568
+ display: flex;
1569
+ align-items: center;
1570
+ border: 1px solid var(--border);
1571
+ border-radius: var(--radius, 8px);
1572
+ background-color: var(--background);
1573
+ height: 44px;
1574
+ transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
1575
+ padding: 2px;
1576
+ gap: 2px;
1577
+ }
1578
+ .editor-number-input-container:focus-within {
1579
+ border-color: var(--ring);
1580
+ }
1581
+ .editor-number-input-btn {
1582
+ height: 100% !important;
1583
+ width: 40px !important;
1584
+ border-radius: var(--radius, 8px);
1585
+ flex-shrink: 0;
1586
+ color: var(--muted-foreground);
1587
+ border: none !important;
1588
+ box-shadow: none !important;
1589
+ }
1590
+ .editor-number-input-btn:hover:not(:disabled) {
1591
+ background-color: var(--accent) !important;
1592
+ color: var(--accent-foreground) !important;
1593
+ }
1594
+ .editor-number-input-btn:active:not(:disabled) {
1595
+ background-color: var(--accent-muted) !important;
1596
+ }
1597
+ .editor-number-input-wrapper {
1598
+ position: relative;
1599
+ flex: 1;
1600
+ display: flex;
1601
+ align-items: center;
1602
+ min-width: 0;
1603
+ height: 100%;
1604
+ border-radius: var(--radius, 8px);
1605
+ overflow: hidden;
1606
+ }
1607
+ .editor-number-input-field {
1608
+ border: none !important;
1609
+ border-radius: 0 !important;
1610
+ height: 100% !important;
1611
+ text-align: center;
1612
+ padding-right: 28px !important;
1613
+ box-shadow: none !important;
1614
+ background: transparent !important;
1615
+ }
1616
+ .editor-number-input-field:focus {
1617
+ box-shadow: none !important;
1618
+ }
1619
+ .editor-number-input-field::-webkit-inner-spin-button,
1620
+ .editor-number-input-field::-webkit-outer-spin-button {
1621
+ -webkit-appearance: none;
1622
+ margin: 0;
1623
+ }
1624
+ .editor-number-input-field {
1625
+ -moz-appearance: textfield;
1626
+ }
1627
+ .editor-number-input-unit {
1628
+ position: absolute;
1629
+ right: 10px;
1630
+ top: 50%;
1631
+ transform: translateY(-50%);
1632
+ font-size: 0.75rem;
1633
+ color: var(--muted-foreground);
1634
+ pointer-events: none;
1635
+ font-family:
1636
+ "JetBrains Mono",
1637
+ ui-monospace,
1638
+ SFMono-Regular,
1639
+ Menlo,
1640
+ Monaco,
1641
+ Consolas,
1642
+ "Liberation Mono",
1643
+ "Courier New",
1644
+ monospace;
1645
+ }
1565
1646
  .editor-toolbar {
1566
1647
  position: sticky;
1567
1648
  top: 0;
@@ -1570,9 +1651,9 @@
1570
1651
  align-items: center;
1571
1652
  flex-wrap: wrap;
1572
1653
  gap: 4px;
1573
- border-bottom: 1px solid var(--border);
1574
- border-top-left-radius: var(--radius, 8px);
1575
- border-top-right-radius: var(--radius, 8px);
1654
+ border-bottom: 1px solid var(--border) !important;
1655
+ border-top-left-radius: var(--radius, 8px) !important;
1656
+ border-top-right-radius: var(--radius, 8px) !important;
1576
1657
  background-color: rgba(255, 255, 255, 0.8);
1577
1658
  }
1578
1659
  @supports (backdrop-filter: blur(4px)) {
@@ -1581,8 +1662,8 @@
1581
1662
  }
1582
1663
  }
1583
1664
  .editor-toolbar {
1584
- padding: 4px;
1585
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1665
+ padding: 8px !important;
1666
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
1586
1667
  width: 100%;
1587
1668
  overflow-x: visible;
1588
1669
  overflow-y: visible;
@@ -1592,13 +1673,13 @@
1592
1673
  display: flex;
1593
1674
  align-items: center;
1594
1675
  gap: 4px;
1595
- padding: 4px;
1676
+ padding: 4px !important;
1596
1677
  border-radius: var(--radius, 8px);
1597
1678
  }
1598
1679
  .editor-toolbar-separator {
1599
1680
  height: 24px !important;
1600
- margin-left: 4px;
1601
- margin-right: 4px;
1681
+ margin-left: 4px !important;
1682
+ margin-right: 4px !important;
1602
1683
  }
1603
1684
  .editor-floating-toolbar {
1604
1685
  position: absolute;
@@ -1611,7 +1692,7 @@
1611
1692
  border: 1px solid var(--border);
1612
1693
  padding: 4px;
1613
1694
  opacity: 0;
1614
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
1695
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
1615
1696
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
1616
1697
  will-change: transform;
1617
1698
  z-index: 50;
@@ -1643,7 +1724,7 @@
1643
1724
  border: 1px solid var(--border);
1644
1725
  padding: 4px;
1645
1726
  opacity: 0;
1646
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
1727
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
1647
1728
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
1648
1729
  will-change: transform;
1649
1730
  z-index: 50;
@@ -1667,7 +1748,7 @@
1667
1748
  }
1668
1749
  }
1669
1750
  .editor-floating-text-format:hover {
1670
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
1751
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
1671
1752
  }
1672
1753
  .editor-floating-text-format .editor-separator--vertical {
1673
1754
  height: 20px;
@@ -1719,6 +1800,9 @@
1719
1800
  background-color: transparent;
1720
1801
  }
1721
1802
  .editor-list-color-dialog {
1803
+ display: flex !important;
1804
+ flex-direction: column !important;
1805
+ gap: 16px;
1722
1806
  padding: 8px 0;
1723
1807
  animation: editor-fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1);
1724
1808
  }
@@ -1734,11 +1818,11 @@
1734
1818
  padding: 0 16px;
1735
1819
  background-color: var(--background);
1736
1820
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
1737
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1821
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
1738
1822
  }
1739
1823
  .editor-list-color-trigger:hover:not(:disabled):not([data-state=on]):not([data-state=active]) {
1740
1824
  transform: translateY(-1px);
1741
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
1825
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
1742
1826
  }
1743
1827
  .editor-list-color-trigger:active:not(:disabled) {
1744
1828
  transform: translateY(0) scale(0.98);
@@ -1746,8 +1830,9 @@
1746
1830
  filter: brightness(0.95);
1747
1831
  }
1748
1832
  .editor-color-picker-content {
1749
- display: flex;
1750
- flex-direction: column;
1833
+ display: flex !important;
1834
+ flex-direction: column !important;
1835
+ width: 380px;
1751
1836
  gap: 16px;
1752
1837
  padding: 16px;
1753
1838
  }
@@ -1792,7 +1877,7 @@
1792
1877
  border-radius: 9999px;
1793
1878
  border: 1px solid var(--border);
1794
1879
  background-color: var(--background);
1795
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1880
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
1796
1881
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
1797
1882
  }
1798
1883
  .editor-slider-thumb:focus-visible:focus-visible {
@@ -1805,7 +1890,7 @@
1805
1890
  height: 32px;
1806
1891
  border-radius: calc(var(--radius, 8px) - 2px);
1807
1892
  border: 1px solid var(--border);
1808
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1893
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
1809
1894
  }
1810
1895
  .editor-color-swatch--disabled {
1811
1896
  opacity: 0.5;
@@ -1865,8 +1950,8 @@
1865
1950
  animation: editor-fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1);
1866
1951
  }
1867
1952
  .editor-table-dialog__group {
1868
- display: flex;
1869
- flex-direction: column;
1953
+ display: flex !important;
1954
+ flex-direction: column !important;
1870
1955
  gap: 8px;
1871
1956
  }
1872
1957
  .editor-table-dialog__checkbox-group {
@@ -1955,18 +2040,13 @@
1955
2040
  .editor-layout-dialog-grid {
1956
2041
  display: grid;
1957
2042
  grid-template-columns: repeat(1, minmax(0, 1fr));
1958
- gap: 12px;
2043
+ gap: 16px;
1959
2044
  }
1960
- @media (min-width: 768px) {
2045
+ @media (min-width: 480px) {
1961
2046
  .editor-layout-dialog-grid {
1962
- grid-template-columns: repeat(3, minmax(0, 1fr));
2047
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1963
2048
  }
1964
2049
  }
1965
- .editor-layout-dialog-group {
1966
- display: flex;
1967
- flex-direction: column;
1968
- gap: 6px;
1969
- }
1970
2050
  .editor-layout-color-trigger {
1971
2051
  height: 44px;
1972
2052
  width: 100%;
@@ -1980,7 +2060,7 @@
1980
2060
  }
1981
2061
  .editor-layout-color-trigger:hover:not(:disabled):hover:not(:disabled):not([data-state=on]):not([data-state=active]) {
1982
2062
  transform: translateY(-1px);
1983
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
2063
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
1984
2064
  }
1985
2065
  .editor-layout-color-trigger:hover:not(:disabled):active:not(:disabled) {
1986
2066
  transform: translateY(0) scale(0.98);
@@ -1999,7 +2079,7 @@
1999
2079
  z-index: 10;
2000
2080
  width: 200px;
2001
2081
  border-radius: var(--radius, 8px);
2002
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
2082
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
2003
2083
  }
2004
2084
  .editor-mentions-item {
2005
2085
  display: flex;
@@ -2078,7 +2158,7 @@
2078
2158
  background-color: var(--background);
2079
2159
  border-radius: var(--radius, 8px);
2080
2160
  border: 1px solid var(--border);
2081
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
2161
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
2082
2162
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
2083
2163
  will-change: transform;
2084
2164
  }
@@ -2119,15 +2199,15 @@
2119
2199
  border: 1px solid var(--border);
2120
2200
  background-color: var(--popover);
2121
2201
  color: var(--popover-foreground);
2122
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
2202
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
2123
2203
  overflow: hidden;
2124
2204
  visibility: visible;
2125
2205
  opacity: 1;
2126
2206
  max-height: 300px;
2127
2207
  }
2128
2208
  .editor-command {
2129
- display: flex;
2130
- flex-direction: column;
2209
+ display: flex !important;
2210
+ flex-direction: column !important;
2131
2211
  height: 100%;
2132
2212
  width: 100%;
2133
2213
  overflow: hidden;
@@ -2195,7 +2275,7 @@
2195
2275
  overflow: hidden;
2196
2276
  border-radius: var(--radius, 8px);
2197
2277
  border: 1px solid var(--border);
2198
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
2278
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
2199
2279
  outline: none;
2200
2280
  }
2201
2281
  .editor-context-menu:has(*) {
@@ -2254,6 +2334,8 @@
2254
2334
  overflow-x: auto;
2255
2335
  flex-wrap: nowrap;
2256
2336
  border-top: 1px solid var(--border);
2337
+ border-bottom-left-radius: 8px;
2338
+ border-bottom-right-radius: 8px;
2257
2339
  padding: 6px 12px;
2258
2340
  background-color: color-mix(in srgb, var(--background), transparent 50%);
2259
2341
  }
@@ -2286,7 +2368,7 @@
2286
2368
  font-size: 0.75rem;
2287
2369
  white-space: nowrap;
2288
2370
  border: 1px solid var(--border);
2289
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2371
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
2290
2372
  z-index: 50;
2291
2373
  pointer-events: none;
2292
2374
  }
@@ -2297,6 +2379,18 @@
2297
2379
  .editor-root-container.editor-root-container--shadow:focus-within {
2298
2380
  box-shadow: 0 0 0 1px var(--border, #d1d5db), 0 0 0 3px var(--ring, rgba(59, 130, 246, 0.5));
2299
2381
  }
2382
+ *,
2383
+ *::before,
2384
+ *::after {
2385
+ box-sizing: border-box;
2386
+ }
2387
+ @supports (color: color-mix(in lab, red, red)) {
2388
+ *,
2389
+ *::before,
2390
+ *::after {
2391
+ outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
2392
+ }
2393
+ }
2300
2394
  .lexical-editor-root {
2301
2395
  font-family:
2302
2396
  var(--font-inter),
@@ -2320,12 +2414,8 @@
2320
2414
  text-align: left !important;
2321
2415
  box-sizing: border-box !important;
2322
2416
  }
2323
- .lexical-editor-root *,
2324
- .lexical-editor-root *::before,
2325
- .lexical-editor-root *::after {
2326
- box-sizing: border-box;
2327
- }
2328
2417
  .lexical-editor-root p,
2418
+ .lexical-editor-root div,
2329
2419
  .lexical-editor-root ul,
2330
2420
  .lexical-editor-root ol,
2331
2421
  .lexical-editor-root li,
@@ -2854,7 +2944,7 @@
2854
2944
  position: relative;
2855
2945
  border-radius: var(--radius, 8px);
2856
2946
  tab-size: 2;
2857
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2947
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
2858
2948
  }
2859
2949
  .lexical-editor-root .editor-code::before {
2860
2950
  content: attr(data-gutter);
@@ -2958,7 +3048,7 @@
2958
3048
  }
2959
3049
  .lexical-editor-root .editor-table .editor-table-cell-action-button:hover:not(:disabled):not([data-state=on]):not([data-state=active]) {
2960
3050
  transform: translateY(-1px);
2961
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
3051
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
2962
3052
  }
2963
3053
  .lexical-editor-root .editor-table .editor-table-cell-action-button:active:not(:disabled) {
2964
3054
  transform: translateY(0) scale(0.98);