@mdaemon/html-editor 1.2.0 → 1.3.0

package/dist/styles.css

@@ -1597,4 +1597,218 @@
   .md-editor .md-toolbar-separator {
     height: 32px;
   }
+}
+.md-speechtotext-dialog {
+  width: 500px;
+  max-width: 90vw;
+}
+
+.md-speechtotext-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.md-speechtotext-lang-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.md-speechtotext-label {
+  font-size: 13px;
+  color: #666;
+  min-width: 60px;
+}
+
+.md-speechtotext-language {
+  flex: 1;
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  font-size: 13px;
+  background: #fff;
+}
+.md-speechtotext-language:focus {
+  outline: none;
+  border-color: #2271b2;
+}
+
+.md-speechtotext-status {
+  font-size: 13px;
+  color: #666;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.md-speechtotext-status.md-speechtotext-status-active {
+  color: #2271b2;
+}
+.md-speechtotext-status.md-speechtotext-status-active::before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #e53e3e;
+  animation: md-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes md-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+.md-speechtotext-transcript {
+  min-height: 120px;
+  max-height: 250px;
+  overflow-y: auto;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  font-size: 14px;
+  line-height: 1.5;
+  background: #fafafa;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.md-speechtotext-final {
+  color: #1a1a1a;
+}
+
+.md-speechtotext-interim {
+  color: #999;
+  font-style: italic;
+}
+
+.md-speechtotext-confidence {
+  font-size: 12px;
+  color: #888;
+  min-height: 18px;
+}
+
+.md-speechtotext-controls {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding-top: 4px;
+}
+
+.md-speechtotext-btn {
+  padding: 8px 16px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  font-size: 13px;
+  cursor: pointer;
+  background: #fff;
+}
+.md-speechtotext-btn:hover {
+  background: #f0f0f0;
+}
+.md-speechtotext-btn.md-speechtotext-btn-start {
+  background: #2271b2;
+  color: #fff;
+  border-color: #2271b2;
+}
+.md-speechtotext-btn.md-speechtotext-btn-start:hover {
+  opacity: 0.9;
+}
+.md-speechtotext-btn.md-speechtotext-btn-stop {
+  background: #e53e3e;
+  color: #fff;
+  border-color: #e53e3e;
+}
+.md-speechtotext-btn.md-speechtotext-btn-stop:hover {
+  opacity: 0.9;
+}
+.md-speechtotext-btn.md-speechtotext-btn-insert {
+  background: #2271b2;
+  color: #fff;
+  border-color: #2271b2;
+}
+.md-speechtotext-btn.md-speechtotext-btn-insert:hover {
+  opacity: 0.9;
+}
+
+.md-editor-oxide-dark .md-speechtotext-language,
+.md-editor-confab-dark .md-speechtotext-language {
+  background: #2a2a2a;
+  color: #e0e0e0;
+  border-color: #444;
+}
+.md-editor-oxide-dark .md-speechtotext-transcript,
+.md-editor-confab-dark .md-speechtotext-transcript {
+  background: #1e1e1e;
+  border-color: #444;
+}
+.md-editor-oxide-dark .md-speechtotext-final,
+.md-editor-confab-dark .md-speechtotext-final {
+  color: #e0e0e0;
+}
+.md-editor-oxide-dark .md-speechtotext-interim,
+.md-editor-confab-dark .md-speechtotext-interim {
+  color: #777;
+}
+.md-editor-oxide-dark .md-speechtotext-label,
+.md-editor-confab-dark .md-speechtotext-label {
+  color: #aaa;
+}
+.md-editor-oxide-dark .md-speechtotext-confidence,
+.md-editor-confab-dark .md-speechtotext-confidence {
+  color: #777;
+}
+.md-editor-oxide-dark .md-speechtotext-btn,
+.md-editor-confab-dark .md-speechtotext-btn {
+  background: #333;
+  color: #e0e0e0;
+  border-color: #555;
+}
+.md-editor-oxide-dark .md-speechtotext-btn:hover,
+.md-editor-confab-dark .md-speechtotext-btn:hover {
+  background: #444;
+}
+.md-editor-oxide-dark .md-speechtotext-btn.md-speechtotext-btn-start, .md-editor-oxide-dark .md-speechtotext-btn.md-speechtotext-btn-insert,
+.md-editor-confab-dark .md-speechtotext-btn.md-speechtotext-btn-start,
+.md-editor-confab-dark .md-speechtotext-btn.md-speechtotext-btn-insert {
+  background: #2271b2;
+  color: #fff;
+  border-color: #2271b2;
+}
+.md-editor-oxide-dark .md-speechtotext-btn.md-speechtotext-btn-stop,
+.md-editor-confab-dark .md-speechtotext-btn.md-speechtotext-btn-stop {
+  background: #e53e3e;
+  color: #fff;
+  border-color: #e53e3e;
+}
+
+.md-toolbar-btn-dictating {
+  position: relative;
+  background: #e53e3e !important;
+  color: #fff !important;
+}
+.md-toolbar-btn-dictating::after {
+  content: "";
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 6px;
+  height: 6px;
+  background: #fff;
+  border-radius: 50%;
+  animation: md-dictate-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes md-dictate-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdaemon/html-editor",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A TinyMCE-compatible HTML editor built on TipTap",
   "homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor",
   "repository": {
@@ -84,6 +84,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@types/jest": "^30.0.0",
     "@types/node": "^25.2.3",
+    "@vitejs/plugin-basic-ssl": "^2.3.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "sass": "^1.97.3",