@mdaemon/html-editor 1.2.1 → 1.4.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/README.md +106 -3
- package/dist/index.d.ts +223 -0
- package/dist/index.js +2643 -73
- package/dist/index.mjs +2643 -73
- package/dist/styles.css +236 -0
- package/package.json +6 -2
package/dist/styles.css
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
1
2
|
/**
|
|
2
3
|
* MDHTMLEditor Styles
|
|
3
4
|
* TinyMCE oxide-compatible theme
|
|
@@ -42,6 +43,23 @@
|
|
|
42
43
|
border-radius: 0;
|
|
43
44
|
height: 100vh !important;
|
|
44
45
|
}
|
|
46
|
+
.md-editor.md-editor-readonly .md-editor-body {
|
|
47
|
+
cursor: default;
|
|
48
|
+
}
|
|
49
|
+
.md-editor .md-anchor {
|
|
50
|
+
display: inline-block;
|
|
51
|
+
width: 12px;
|
|
52
|
+
height: 14px;
|
|
53
|
+
vertical-align: middle;
|
|
54
|
+
background: rgba(34, 113, 178, 0.12);
|
|
55
|
+
border-bottom: 1px dotted #2271b2;
|
|
56
|
+
cursor: default;
|
|
57
|
+
}
|
|
58
|
+
.md-editor .md-anchor::after {
|
|
59
|
+
content: "⚓";
|
|
60
|
+
font-size: 11px;
|
|
61
|
+
opacity: 0.6;
|
|
62
|
+
}
|
|
45
63
|
|
|
46
64
|
.md-toolbar {
|
|
47
65
|
display: flex;
|
|
@@ -58,6 +76,10 @@
|
|
|
58
76
|
top: 0;
|
|
59
77
|
z-index: 10;
|
|
60
78
|
}
|
|
79
|
+
.md-toolbar.md-toolbar-disabled {
|
|
80
|
+
pointer-events: none;
|
|
81
|
+
opacity: 0.5;
|
|
82
|
+
}
|
|
61
83
|
|
|
62
84
|
.md-toolbar-group {
|
|
63
85
|
display: flex;
|
|
@@ -1597,4 +1619,218 @@
|
|
|
1597
1619
|
.md-editor .md-toolbar-separator {
|
|
1598
1620
|
height: 32px;
|
|
1599
1621
|
}
|
|
1622
|
+
}
|
|
1623
|
+
.md-speechtotext-dialog {
|
|
1624
|
+
width: 500px;
|
|
1625
|
+
max-width: 90vw;
|
|
1626
|
+
}
|
|
1627
|
+
|
|
1628
|
+
.md-speechtotext-body {
|
|
1629
|
+
padding: 16px;
|
|
1630
|
+
display: flex;
|
|
1631
|
+
flex-direction: column;
|
|
1632
|
+
gap: 12px;
|
|
1633
|
+
}
|
|
1634
|
+
|
|
1635
|
+
.md-speechtotext-lang-row {
|
|
1636
|
+
display: flex;
|
|
1637
|
+
align-items: center;
|
|
1638
|
+
gap: 12px;
|
|
1639
|
+
}
|
|
1640
|
+
|
|
1641
|
+
.md-speechtotext-label {
|
|
1642
|
+
font-size: 13px;
|
|
1643
|
+
color: #666;
|
|
1644
|
+
min-width: 60px;
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1647
|
+
.md-speechtotext-language {
|
|
1648
|
+
flex: 1;
|
|
1649
|
+
padding: 6px 10px;
|
|
1650
|
+
border: 1px solid #ccc;
|
|
1651
|
+
border-radius: 3px;
|
|
1652
|
+
font-size: 13px;
|
|
1653
|
+
background: #fff;
|
|
1654
|
+
}
|
|
1655
|
+
.md-speechtotext-language:focus {
|
|
1656
|
+
outline: none;
|
|
1657
|
+
border-color: #2271b2;
|
|
1658
|
+
}
|
|
1659
|
+
|
|
1660
|
+
.md-speechtotext-status {
|
|
1661
|
+
font-size: 13px;
|
|
1662
|
+
color: #666;
|
|
1663
|
+
min-height: 20px;
|
|
1664
|
+
display: flex;
|
|
1665
|
+
align-items: center;
|
|
1666
|
+
gap: 8px;
|
|
1667
|
+
}
|
|
1668
|
+
.md-speechtotext-status.md-speechtotext-status-active {
|
|
1669
|
+
color: #2271b2;
|
|
1670
|
+
}
|
|
1671
|
+
.md-speechtotext-status.md-speechtotext-status-active::before {
|
|
1672
|
+
content: "";
|
|
1673
|
+
display: inline-block;
|
|
1674
|
+
width: 8px;
|
|
1675
|
+
height: 8px;
|
|
1676
|
+
border-radius: 50%;
|
|
1677
|
+
background: #e53e3e;
|
|
1678
|
+
animation: md-pulse 1.2s ease-in-out infinite;
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1681
|
+
@keyframes md-pulse {
|
|
1682
|
+
0%, 100% {
|
|
1683
|
+
opacity: 1;
|
|
1684
|
+
}
|
|
1685
|
+
50% {
|
|
1686
|
+
opacity: 0.4;
|
|
1687
|
+
}
|
|
1688
|
+
}
|
|
1689
|
+
.md-speechtotext-transcript {
|
|
1690
|
+
min-height: 120px;
|
|
1691
|
+
max-height: 250px;
|
|
1692
|
+
overflow-y: auto;
|
|
1693
|
+
padding: 12px;
|
|
1694
|
+
border: 1px solid #ccc;
|
|
1695
|
+
border-radius: 3px;
|
|
1696
|
+
font-size: 14px;
|
|
1697
|
+
line-height: 1.5;
|
|
1698
|
+
background: #fafafa;
|
|
1699
|
+
white-space: pre-wrap;
|
|
1700
|
+
word-wrap: break-word;
|
|
1701
|
+
}
|
|
1702
|
+
|
|
1703
|
+
.md-speechtotext-final {
|
|
1704
|
+
color: #1a1a1a;
|
|
1705
|
+
}
|
|
1706
|
+
|
|
1707
|
+
.md-speechtotext-interim {
|
|
1708
|
+
color: #999;
|
|
1709
|
+
font-style: italic;
|
|
1710
|
+
}
|
|
1711
|
+
|
|
1712
|
+
.md-speechtotext-confidence {
|
|
1713
|
+
font-size: 12px;
|
|
1714
|
+
color: #888;
|
|
1715
|
+
min-height: 18px;
|
|
1716
|
+
}
|
|
1717
|
+
|
|
1718
|
+
.md-speechtotext-controls {
|
|
1719
|
+
display: flex;
|
|
1720
|
+
gap: 8px;
|
|
1721
|
+
justify-content: flex-end;
|
|
1722
|
+
padding-top: 4px;
|
|
1723
|
+
}
|
|
1724
|
+
|
|
1725
|
+
.md-speechtotext-btn {
|
|
1726
|
+
padding: 8px 16px;
|
|
1727
|
+
border: 1px solid #ccc;
|
|
1728
|
+
border-radius: 3px;
|
|
1729
|
+
font-size: 13px;
|
|
1730
|
+
cursor: pointer;
|
|
1731
|
+
background: #fff;
|
|
1732
|
+
}
|
|
1733
|
+
.md-speechtotext-btn:hover {
|
|
1734
|
+
background: #f0f0f0;
|
|
1735
|
+
}
|
|
1736
|
+
.md-speechtotext-btn.md-speechtotext-btn-start {
|
|
1737
|
+
background: #2271b2;
|
|
1738
|
+
color: #fff;
|
|
1739
|
+
border-color: #2271b2;
|
|
1740
|
+
}
|
|
1741
|
+
.md-speechtotext-btn.md-speechtotext-btn-start:hover {
|
|
1742
|
+
opacity: 0.9;
|
|
1743
|
+
}
|
|
1744
|
+
.md-speechtotext-btn.md-speechtotext-btn-stop {
|
|
1745
|
+
background: #e53e3e;
|
|
1746
|
+
color: #fff;
|
|
1747
|
+
border-color: #e53e3e;
|
|
1748
|
+
}
|
|
1749
|
+
.md-speechtotext-btn.md-speechtotext-btn-stop:hover {
|
|
1750
|
+
opacity: 0.9;
|
|
1751
|
+
}
|
|
1752
|
+
.md-speechtotext-btn.md-speechtotext-btn-insert {
|
|
1753
|
+
background: #2271b2;
|
|
1754
|
+
color: #fff;
|
|
1755
|
+
border-color: #2271b2;
|
|
1756
|
+
}
|
|
1757
|
+
.md-speechtotext-btn.md-speechtotext-btn-insert:hover {
|
|
1758
|
+
opacity: 0.9;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
.md-editor-oxide-dark .md-speechtotext-language,
|
|
1762
|
+
.md-editor-confab-dark .md-speechtotext-language {
|
|
1763
|
+
background: #2a2a2a;
|
|
1764
|
+
color: #e0e0e0;
|
|
1765
|
+
border-color: #444;
|
|
1766
|
+
}
|
|
1767
|
+
.md-editor-oxide-dark .md-speechtotext-transcript,
|
|
1768
|
+
.md-editor-confab-dark .md-speechtotext-transcript {
|
|
1769
|
+
background: #1e1e1e;
|
|
1770
|
+
border-color: #444;
|
|
1771
|
+
}
|
|
1772
|
+
.md-editor-oxide-dark .md-speechtotext-final,
|
|
1773
|
+
.md-editor-confab-dark .md-speechtotext-final {
|
|
1774
|
+
color: #e0e0e0;
|
|
1775
|
+
}
|
|
1776
|
+
.md-editor-oxide-dark .md-speechtotext-interim,
|
|
1777
|
+
.md-editor-confab-dark .md-speechtotext-interim {
|
|
1778
|
+
color: #777;
|
|
1779
|
+
}
|
|
1780
|
+
.md-editor-oxide-dark .md-speechtotext-label,
|
|
1781
|
+
.md-editor-confab-dark .md-speechtotext-label {
|
|
1782
|
+
color: #aaa;
|
|
1783
|
+
}
|
|
1784
|
+
.md-editor-oxide-dark .md-speechtotext-confidence,
|
|
1785
|
+
.md-editor-confab-dark .md-speechtotext-confidence {
|
|
1786
|
+
color: #777;
|
|
1787
|
+
}
|
|
1788
|
+
.md-editor-oxide-dark .md-speechtotext-btn,
|
|
1789
|
+
.md-editor-confab-dark .md-speechtotext-btn {
|
|
1790
|
+
background: #333;
|
|
1791
|
+
color: #e0e0e0;
|
|
1792
|
+
border-color: #555;
|
|
1793
|
+
}
|
|
1794
|
+
.md-editor-oxide-dark .md-speechtotext-btn:hover,
|
|
1795
|
+
.md-editor-confab-dark .md-speechtotext-btn:hover {
|
|
1796
|
+
background: #444;
|
|
1797
|
+
}
|
|
1798
|
+
.md-editor-oxide-dark .md-speechtotext-btn.md-speechtotext-btn-start, .md-editor-oxide-dark .md-speechtotext-btn.md-speechtotext-btn-insert,
|
|
1799
|
+
.md-editor-confab-dark .md-speechtotext-btn.md-speechtotext-btn-start,
|
|
1800
|
+
.md-editor-confab-dark .md-speechtotext-btn.md-speechtotext-btn-insert {
|
|
1801
|
+
background: #2271b2;
|
|
1802
|
+
color: #fff;
|
|
1803
|
+
border-color: #2271b2;
|
|
1804
|
+
}
|
|
1805
|
+
.md-editor-oxide-dark .md-speechtotext-btn.md-speechtotext-btn-stop,
|
|
1806
|
+
.md-editor-confab-dark .md-speechtotext-btn.md-speechtotext-btn-stop {
|
|
1807
|
+
background: #e53e3e;
|
|
1808
|
+
color: #fff;
|
|
1809
|
+
border-color: #e53e3e;
|
|
1810
|
+
}
|
|
1811
|
+
|
|
1812
|
+
.md-toolbar-btn-dictating {
|
|
1813
|
+
position: relative;
|
|
1814
|
+
background: #e53e3e !important;
|
|
1815
|
+
color: #fff !important;
|
|
1816
|
+
}
|
|
1817
|
+
.md-toolbar-btn-dictating::after {
|
|
1818
|
+
content: "";
|
|
1819
|
+
position: absolute;
|
|
1820
|
+
top: 4px;
|
|
1821
|
+
right: 4px;
|
|
1822
|
+
width: 6px;
|
|
1823
|
+
height: 6px;
|
|
1824
|
+
background: #fff;
|
|
1825
|
+
border-radius: 50%;
|
|
1826
|
+
animation: md-dictate-pulse 1.2s ease-in-out infinite;
|
|
1827
|
+
}
|
|
1828
|
+
|
|
1829
|
+
@keyframes md-dictate-pulse {
|
|
1830
|
+
0%, 100% {
|
|
1831
|
+
opacity: 1;
|
|
1832
|
+
}
|
|
1833
|
+
50% {
|
|
1834
|
+
opacity: 0.3;
|
|
1835
|
+
}
|
|
1600
1836
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mdaemon/html-editor",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "A TinyMCE-compatible HTML editor built on TipTap",
|
|
5
5
|
"homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor",
|
|
6
6
|
"repository": {
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"lint": "eslint src --ext .ts",
|
|
46
46
|
"typecheck": "tsc --noEmit",
|
|
47
47
|
"demo": "vite test",
|
|
48
|
-
"update:tiptap": "npm install @tiptap/core@latest @tiptap/extension-character-count@latest @tiptap/extension-code-block-lowlight@latest @tiptap/extension-color@latest @tiptap/extension-font-family@latest @tiptap/extension-highlight@latest @tiptap/extension-image@latest @tiptap/extension-link@latest @tiptap/extension-placeholder@latest @tiptap/extension-table@latest @tiptap/extension-table-cell@latest @tiptap/extension-table-header@latest @tiptap/extension-table-row@latest @tiptap/extension-text-align@latest @tiptap/extension-text-style@latest @tiptap/extension-underline@latest @tiptap/pm@latest @tiptap/starter-kit@latest"
|
|
48
|
+
"update:tiptap": "npm install @tiptap/core@latest @tiptap/extension-character-count@latest @tiptap/extension-code-block-lowlight@latest @tiptap/extension-color@latest @tiptap/extension-font-family@latest @tiptap/extension-highlight@latest @tiptap/extension-image@latest @tiptap/extension-link@latest @tiptap/extension-paragraph@latest @tiptap/extension-placeholder@latest @tiptap/extension-subscript@latest @tiptap/extension-superscript@latest @tiptap/extension-table@latest @tiptap/extension-table-cell@latest @tiptap/extension-table-header@latest @tiptap/extension-table-row@latest @tiptap/extension-text-align@latest @tiptap/extension-text-style@latest @tiptap/extension-underline@latest @tiptap/pm@latest @tiptap/starter-kit@latest"
|
|
49
49
|
},
|
|
50
50
|
"keywords": [
|
|
51
51
|
"html-editor",
|
|
@@ -68,7 +68,10 @@
|
|
|
68
68
|
"@tiptap/extension-highlight": "^3.23.4",
|
|
69
69
|
"@tiptap/extension-image": "^3.23.4",
|
|
70
70
|
"@tiptap/extension-link": "^3.23.4",
|
|
71
|
+
"@tiptap/extension-paragraph": "^3.23.4",
|
|
71
72
|
"@tiptap/extension-placeholder": "^3.23.4",
|
|
73
|
+
"@tiptap/extension-subscript": "^3.23.4",
|
|
74
|
+
"@tiptap/extension-superscript": "^3.23.4",
|
|
72
75
|
"@tiptap/extension-table": "^3.23.4",
|
|
73
76
|
"@tiptap/extension-table-cell": "^3.23.4",
|
|
74
77
|
"@tiptap/extension-table-header": "^3.23.4",
|
|
@@ -84,6 +87,7 @@
|
|
|
84
87
|
"@testing-library/jest-dom": "^6.9.1",
|
|
85
88
|
"@types/jest": "^30.0.0",
|
|
86
89
|
"@types/node": "^25.2.3",
|
|
90
|
+
"@vitejs/plugin-basic-ssl": "^2.3.0",
|
|
87
91
|
"jest": "^30.2.0",
|
|
88
92
|
"jest-environment-jsdom": "^30.2.0",
|
|
89
93
|
"sass": "^1.97.3",
|