@thangph2146/lexical-editor 0.0.6 → 0.0.7

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(*) {
@@ -2286,7 +2366,7 @@
2286
2366
  font-size: 0.75rem;
2287
2367
  white-space: nowrap;
2288
2368
  border: 1px solid var(--border);
2289
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2369
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
2290
2370
  z-index: 50;
2291
2371
  pointer-events: none;
2292
2372
  }
@@ -2297,6 +2377,18 @@
2297
2377
  .editor-root-container.editor-root-container--shadow:focus-within {
2298
2378
  box-shadow: 0 0 0 1px var(--border, #d1d5db), 0 0 0 3px var(--ring, rgba(59, 130, 246, 0.5));
2299
2379
  }
2380
+ *,
2381
+ *::before,
2382
+ *::after {
2383
+ box-sizing: border-box;
2384
+ }
2385
+ @supports (color: color-mix(in lab, red, red)) {
2386
+ *,
2387
+ *::before,
2388
+ *::after {
2389
+ outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
2390
+ }
2391
+ }
2300
2392
  .lexical-editor-root {
2301
2393
  font-family:
2302
2394
  var(--font-inter),
@@ -2320,12 +2412,8 @@
2320
2412
  text-align: left !important;
2321
2413
  box-sizing: border-box !important;
2322
2414
  }
2323
- .lexical-editor-root *,
2324
- .lexical-editor-root *::before,
2325
- .lexical-editor-root *::after {
2326
- box-sizing: border-box;
2327
- }
2328
2415
  .lexical-editor-root p,
2416
+ .lexical-editor-root div,
2329
2417
  .lexical-editor-root ul,
2330
2418
  .lexical-editor-root ol,
2331
2419
  .lexical-editor-root li,
@@ -2854,7 +2942,7 @@
2854
2942
  position: relative;
2855
2943
  border-radius: var(--radius, 8px);
2856
2944
  tab-size: 2;
2857
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2945
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
2858
2946
  }
2859
2947
  .lexical-editor-root .editor-code::before {
2860
2948
  content: attr(data-gutter);
@@ -2958,7 +3046,7 @@
2958
3046
  }
2959
3047
  .lexical-editor-root .editor-table .editor-table-cell-action-button:hover:not(:disabled):not([data-state=on]):not([data-state=active]) {
2960
3048
  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);
3049
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
2962
3050
  }
2963
3051
  .lexical-editor-root .editor-table .editor-table-cell-action-button:active:not(:disabled) {
2964
3052
  transform: translateY(0) scale(0.98);