@mdaemon/html-editor 1.0.13 → 1.2.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.
package/dist/styles.css CHANGED
@@ -48,6 +48,7 @@
48
48
  align-items: flex-start;
49
49
  padding: 4px;
50
50
  background: #f0f0f0;
51
+ --md-toolbar-bg: #f0f0f0;
51
52
  border-bottom: 1px solid #ccc;
52
53
  gap: 2px;
53
54
  min-height: 39px;
@@ -985,6 +986,7 @@
985
986
  }
986
987
  .md-editor-oxide-dark .md-toolbar {
987
988
  background: #1a252f;
989
+ --md-toolbar-bg: #1a252f;
988
990
  border-color: #364049;
989
991
  }
990
992
  .md-editor-oxide-dark .md-toolbar-btn {
@@ -1130,6 +1132,7 @@
1130
1132
  }
1131
1133
  .md-editor-confab .md-toolbar {
1132
1134
  background: var(--color-confab-gray-50, #f9fafb);
1135
+ --md-toolbar-bg: var(--color-confab-gray-50, #f9fafb);
1133
1136
  border-color: var(--color-confab-gray-200, #e5e7eb);
1134
1137
  }
1135
1138
  .md-editor-confab .md-toolbar-btn {
@@ -1293,6 +1296,7 @@
1293
1296
  }
1294
1297
  .md-editor-confab-dark .md-toolbar {
1295
1298
  background: var(--color-dark-bg-secondary, #1e1e1e);
1299
+ --md-toolbar-bg: var(--color-dark-bg-secondary, #1e1e1e);
1296
1300
  border-color: var(--color-dark-border, #333);
1297
1301
  }
1298
1302
  .md-editor-confab-dark .md-toolbar-btn {
@@ -1489,4 +1493,108 @@
1489
1493
  }
1490
1494
  .md-editor-confab-dark .md-link-editor-row label {
1491
1495
  color: var(--color-dark-text-muted, #888);
1496
+ }
1497
+
1498
+ .md-editor-narrow .md-toolbar-buttons {
1499
+ flex-wrap: nowrap;
1500
+ overflow-x: auto;
1501
+ overflow-y: hidden;
1502
+ max-height: none;
1503
+ -webkit-overflow-scrolling: touch;
1504
+ scrollbar-width: thin;
1505
+ scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
1506
+ }
1507
+ .md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar {
1508
+ height: 4px;
1509
+ }
1510
+ .md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar-track {
1511
+ background: transparent;
1512
+ }
1513
+ .md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar-thumb {
1514
+ background: rgba(0, 0, 0, 0.2);
1515
+ border-radius: 2px;
1516
+ }
1517
+ .md-editor-narrow .md-toolbar-toggle-btn {
1518
+ display: none !important;
1519
+ }
1520
+ .md-editor-narrow .md-toolbar-group {
1521
+ flex-shrink: 0;
1522
+ }
1523
+ .md-editor-narrow .md-toolbar-separator {
1524
+ flex-shrink: 0;
1525
+ }
1526
+
1527
+ @media (pointer: coarse) {
1528
+ .md-editor-narrow .md-toolbar-buttons {
1529
+ scrollbar-width: none;
1530
+ }
1531
+ .md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar {
1532
+ display: none;
1533
+ }
1534
+ }
1535
+ .md-editor-oxide-dark.md-editor-narrow .md-toolbar-buttons,
1536
+ .md-editor-confab-dark.md-editor-narrow .md-toolbar-buttons {
1537
+ scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
1538
+ }
1539
+ .md-editor-oxide-dark.md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar-thumb,
1540
+ .md-editor-confab-dark.md-editor-narrow .md-toolbar-buttons::-webkit-scrollbar-thumb {
1541
+ background: rgba(255, 255, 255, 0.25);
1542
+ }
1543
+
1544
+ .md-editor-narrow .md-toolbar {
1545
+ position: relative;
1546
+ }
1547
+ .md-editor-narrow .md-toolbar::before, .md-editor-narrow .md-toolbar::after {
1548
+ content: "";
1549
+ position: absolute;
1550
+ top: 0;
1551
+ bottom: 0;
1552
+ width: 20px;
1553
+ pointer-events: none;
1554
+ z-index: 2;
1555
+ opacity: 0;
1556
+ transition: opacity 0.2s ease;
1557
+ }
1558
+ .md-editor-narrow .md-toolbar::before {
1559
+ left: 0;
1560
+ background: linear-gradient(to right, var(--md-toolbar-bg, #f0f0f0), transparent);
1561
+ }
1562
+ .md-editor-narrow .md-toolbar::after {
1563
+ right: 0;
1564
+ background: linear-gradient(to left, var(--md-toolbar-bg, #f0f0f0), transparent);
1565
+ }
1566
+ .md-editor-narrow .md-toolbar.md-toolbar-scroll-start::after {
1567
+ opacity: 1;
1568
+ }
1569
+ .md-editor-narrow .md-toolbar.md-toolbar-scroll-middle::before, .md-editor-narrow .md-toolbar.md-toolbar-scroll-middle::after {
1570
+ opacity: 1;
1571
+ }
1572
+ .md-editor-narrow .md-toolbar.md-toolbar-scroll-end::before {
1573
+ opacity: 1;
1574
+ }
1575
+
1576
+ @media (pointer: coarse) {
1577
+ .md-editor .md-toolbar {
1578
+ min-height: 52px;
1579
+ }
1580
+ .md-editor:not(.md-editor-narrow) .md-editor .md-toolbar-buttons {
1581
+ max-height: 44px;
1582
+ }
1583
+ .md-editor:not(.md-editor-narrow) .md-editor .md-toolbar-buttons.md-toolbar-expanded {
1584
+ max-height: none;
1585
+ }
1586
+ .md-editor .md-toolbar-btn {
1587
+ min-width: 44px;
1588
+ min-height: 44px;
1589
+ }
1590
+ .md-editor .md-toolbar-dropdown-btn {
1591
+ min-height: 44px;
1592
+ }
1593
+ .md-editor .md-toolbar-colorpicker-btn {
1594
+ min-height: 44px;
1595
+ min-width: 44px;
1596
+ }
1597
+ .md-editor .md-toolbar-separator {
1598
+ height: 32px;
1599
+ }
1492
1600
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mdaemon/html-editor",
3
- "version": "1.0.13",
3
+ "version": "1.2.0",
4
4
  "description": "A TinyMCE-compatible HTML editor built on TipTap",
5
5
  "homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor",
6
6
  "repository": {
@@ -60,24 +60,24 @@
60
60
  },
61
61
  "license": "LGPL-3.0-or-later",
62
62
  "dependencies": {
63
- "@tiptap/core": "^3.22.3",
64
- "@tiptap/extension-character-count": "^3.22.3",
65
- "@tiptap/extension-code-block-lowlight": "^3.22.3",
66
- "@tiptap/extension-color": "^3.22.3",
67
- "@tiptap/extension-font-family": "^3.22.3",
68
- "@tiptap/extension-highlight": "^3.22.3",
69
- "@tiptap/extension-image": "^3.22.3",
70
- "@tiptap/extension-link": "^3.22.3",
71
- "@tiptap/extension-placeholder": "^3.22.3",
72
- "@tiptap/extension-table": "^3.22.3",
73
- "@tiptap/extension-table-cell": "^3.22.3",
74
- "@tiptap/extension-table-header": "^3.22.3",
75
- "@tiptap/extension-table-row": "^3.22.3",
76
- "@tiptap/extension-text-align": "^3.22.3",
77
- "@tiptap/extension-text-style": "^3.22.3",
78
- "@tiptap/extension-underline": "^3.22.3",
79
- "@tiptap/pm": "^3.22.3",
80
- "@tiptap/starter-kit": "^3.22.3",
63
+ "@tiptap/core": "^3.23.4",
64
+ "@tiptap/extension-character-count": "^3.23.4",
65
+ "@tiptap/extension-code-block-lowlight": "^3.23.4",
66
+ "@tiptap/extension-color": "^3.23.4",
67
+ "@tiptap/extension-font-family": "^3.23.4",
68
+ "@tiptap/extension-highlight": "^3.23.4",
69
+ "@tiptap/extension-image": "^3.23.4",
70
+ "@tiptap/extension-link": "^3.23.4",
71
+ "@tiptap/extension-placeholder": "^3.23.4",
72
+ "@tiptap/extension-table": "^3.23.4",
73
+ "@tiptap/extension-table-cell": "^3.23.4",
74
+ "@tiptap/extension-table-header": "^3.23.4",
75
+ "@tiptap/extension-table-row": "^3.23.4",
76
+ "@tiptap/extension-text-align": "^3.23.4",
77
+ "@tiptap/extension-text-style": "^3.23.4",
78
+ "@tiptap/extension-underline": "^3.23.4",
79
+ "@tiptap/pm": "^3.23.4",
80
+ "@tiptap/starter-kit": "^3.23.4",
81
81
  "lowlight": "^3.3.0"
82
82
  },
83
83
  "devDependencies": {