dictate-button 0.1.0 → 0.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.
Files changed (20) hide show
  1. package/404.html +4 -4
  2. package/README.md +41 -9
  3. package/dist/404.html +4 -4
  4. package/dist/dictate-button.cjs.js +2 -2
  5. package/dist/dictate-button.d.ts +2 -2
  6. package/dist/dictate-button.es.js +29 -29
  7. package/dist/dictate-button.styles.d.ts +1 -1
  8. package/dist/inject-exclusive.cjs.js +1 -0
  9. package/dist/inject-exclusive.d.ts +1 -0
  10. package/dist/inject-exclusive.es.js +35 -0
  11. package/dist/inject-inclusive.cjs.js +1 -0
  12. package/dist/inject-inclusive.d.ts +1 -0
  13. package/dist/inject-inclusive.es.js +35 -0
  14. package/dist/inject.cjs.js +1 -1
  15. package/dist/inject.es.js +1 -34
  16. package/package.json +9 -1
  17. package/src/inject-exclusive.js +76 -0
  18. package/src/inject-inclusive.js +76 -0
  19. package/src/inject.js +2 -77
  20. package/vite.config.ts +2 -0
package/404.html CHANGED
@@ -4,14 +4,14 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Dictate Button Web Component</title>
7
+ <title>Dictate Button CDN</title>
8
8
  </head>
9
9
 
10
10
  <body
11
11
  style="display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; height: 100vh;">
12
- </body>
13
- <h1>404 - Not Found</h1>
14
- <p>Check the correct url on <a href="https://dictate-button.io">dictate-button.io</a></p>
12
+ <h1>404 - Not Found</h1>
13
+ <p>Check the correct url in the docs <a href="https://github.com/kkomelin/dictate-button">kkomelin/dictate-button</a>
14
+ </p>
15
15
  </body>
16
16
 
17
17
  </html>
package/README.md CHANGED
@@ -1,4 +1,5 @@
1
1
  # Dictate Button (Web Component)
2
+ ![NPM Version](https://img.shields.io/npm/v/dictate-button)
2
3
 
3
4
  A customizable web component that adds speech-to-text dictation capabilities to any text input or textarea field on your website.
4
5
 
@@ -8,7 +9,7 @@ Developed for [dictate-button.io](https://dictate-button.io).
8
9
 
9
10
  - Easy integration with any website
10
11
  - Compatible with any framework (or no framework)
11
- - Automatic injection into any textarea or text input with the `data-dictate-button-target` attribute
12
+ - Automatic injection into any textarea or text input with the `data-dictate-button-on` attribute (exclusive mode) or without the `data-dictate-button-off` attribute (inclusive mode)
12
13
  - Simple speech-to-text functionality with clean UI
13
14
  - Customizable size and API endpoint
14
15
  - Dark and light theme support
@@ -17,25 +18,52 @@ Developed for [dictate-button.io](https://dictate-button.io).
17
18
 
18
19
  ## Usage
19
20
 
21
+ ### Auto-inject modes
22
+
23
+ Choose the auto-inject mode that best suits your needs:
24
+
25
+ | Mode | Description | Scripts |
26
+ |---|---|---|
27
+ | Exclusive | Automatically injects the dictate button into any textarea or text input **with the `data-dictate-button-on` attribute**. | `inject-exclusive.es.js`, `inject-exclusive.cjs.js` |
28
+ | Inclusive | Automatically injects the dictate button into any textarea or text input **without the `data-dictate-button-off` attribute**. | `inject-inclusive.es.js`, `inject-inclusive.cjs.js` |
29
+
20
30
  ### From CDN
21
31
 
22
- #### Option 1: Using the auto-inject script
32
+ #### Option 1: Using the exclusive auto-inject script
23
33
 
24
- Include the inject script in your HTML:
34
+ In your HTML `<head>` tag, add the following script tags:
25
35
 
26
36
  ```html
27
37
  <script type="module" crossorigin src="https://cdn.dictate-button.io/dictate-button.es.js"></script>
28
- <script type="module" crossorigin src="https://cdn.dictate-button.io/inject.es.js"></script>
38
+ <script type="module" crossorigin src="https://cdn.dictate-button.io/inject-exclusive.es.js"></script>
29
39
  ```
30
40
 
31
- Add the `data-dictate-button-target` attribute to any textarea or text input where you want the dictate button to appear:
41
+ Add the `data-dictate-button-on` attribute to any `textarea` or `input[type=text]` elements where you want the dictate button to appear:
32
42
 
33
43
  ```html
34
- <textarea data-dictate-button-target></textarea>
35
- <input type="text" data-dictate-button-target />
44
+ <textarea data-dictate-button-on></textarea>
45
+ <input type="text" data-dictate-button-on />
36
46
  ```
37
47
 
38
- #### Option 2: Manual integration
48
+ #### Option 2: Using the inclusive auto-inject script
49
+
50
+ In your HTML `<head>` tag, add the following script tags:
51
+
52
+ ```html
53
+ <script type="module" crossorigin src="https://cdn.dictate-button.io/dictate-button.es.js"></script>
54
+ <script type="module" crossorigin src="https://cdn.dictate-button.io/inject-inclusive.es.js"></script>
55
+ ```
56
+
57
+ All `textarea` and `input[type=text]` elements without the `data-dictate-button-off` attribute will be automatically enhanced with the dictate button by default.
58
+
59
+ To disable that for a specific field, add the `data-dictate-button-off` attribute to it this way:
60
+
61
+ ```html
62
+ <textarea data-dictate-button-off></textarea>
63
+ <input type="text" data-dictate-button-off />
64
+ ```
65
+
66
+ #### Option 3: Manual integration
39
67
 
40
68
  Import the component and use it directly in your code:
41
69
 
@@ -58,9 +86,13 @@ import 'dictate-button'
58
86
  The auto-inject script:
59
87
 
60
88
  ```js
61
- import 'dictate-button/inject'
89
+ import 'dictate-button/inject-exclusive'
90
+ // or
91
+ import 'dictate-button/inject-inclusive'
62
92
  ```
63
93
 
94
+ To choose between **exclusive** and **inclusive** auto-inject modes, see the [Auto-inject modes](#auto-inject-modes) section.
95
+
64
96
  ## Events
65
97
 
66
98
  The dictate-button component emits the following events:
package/dist/404.html CHANGED
@@ -4,14 +4,14 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Dictate Button Web Component</title>
7
+ <title>Dictate Button CDN</title>
8
8
  </head>
9
9
 
10
10
  <body
11
11
  style="display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; height: 100vh;">
12
- </body>
13
- <h1>404 - Not Found</h1>
14
- <p>Check the correct url on <a href="https://dictate-button.io">dictate-button.io</a></p>
12
+ <h1>404 - Not Found</h1>
13
+ <p>Check the correct url in the docs <a href="https://github.com/kkomelin/dictate-button">kkomelin/dictate-button</a>
14
+ </p>
15
15
  </body>
16
16
 
17
17
  </html>
package/dist/dictate-button.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";const st=(t,e)=>t===e,T={equals:st};let rt=Q;const w=1,O=2,q={owned:null,cleanups:null,context:null,owner:null};var b=null;let R=null,it=null,f=null,p=null,_=null,M=0;function ot(t,e){const n=f,r=b,s=t.length===0,i=e===void 0?r:e,l=s?q:{owned:null,cleanups:null,context:i?i.context:null,owner:i},o=s?t:()=>t(()=>L(()=>E(l)));b=l,f=null;try{return A(o,!0)}finally{f=n,b=r}}function z(t,e){e=e?Object.assign({},T,e):T;const n={value:t,observers:null,observerSlots:null,comparator:e.equals||void 0},r=s=>(typeof s=="function"&&(s=s(n.value)),H(n,s));return[G.bind(n),r]}function P(t,e,n){const r=Z(t,e,!1,w);B(r)}function lt(t,e,n){n=n?Object.assign({},T,n):T;const r=Z(t,e,!0,0);return r.observers=null,r.observerSlots=null,r.comparator=n.equals||void 0,B(r),G.bind(r)}function L(t){if(f===null)return t();const e=f;f=null;try{return t()}finally{f=e}}function G(){if(this.sources&&this.state)if(this.state===w)B(this);else{const t=p;p=null,A(()=>j(this),!1),p=t}if(f){const t=this.observers?this.observers.length:0;f.sources?(f.sources.push(this),f.sourceSlots.push(t)):(f.sources=[this],f.sourceSlots=[t]),this.observers?(this.observers.push(f),this.observerSlots.push(f.sources.length-1)):(this.observers=[f],this.observerSlots=[f.sources.length-1])}return this.value}function H(t,e,n){let r=t.value;return(!t.comparator||!t.comparator(r,e))&&(t.value=e,t.observers&&t.observers.length&&A(()=>{for(let s=0;s<t.observers.length;s+=1){const i=t.observers[s],l=R&&R.running;l&&R.disposed.has(i),(l?!i.tState:!i.state)&&(i.pure?p.push(i):_.push(i),i.observers&&W(i)),l||(i.state=w)}if(p.length>1e6)throw p=[],new Error},!1)),e}function B(t){if(!t.fn)return;E(t);const e=M;ct(t,t.value,e)}function ct(t,e,n){let r;const s=b,i=f;f=b=t;try{r=t.fn(e)}catch(l){return t.pure&&(t.state=w,t.owned&&t.owned.forEach(E),t.owned=null),t.updatedAt=n+1,X(l)}finally{f=i,b=s}(!t.updatedAt||t.updatedAt<=n)&&(t.updatedAt!=null&&"observers"in t?H(t,r):t.value=r,t.updatedAt=n)}function Z(t,e,n,r=w,s){const i={fn:t,state:r,updatedAt:null,owned:null,sources:null,sourceSlots:null,cleanups:null,value:e,owner:b,context:b?b.context:null,pure:n};return b===null||b!==q&&(b.owned?b.owned.push(i):b.owned=[i]),i}function J(t){if(t.state===0)return;if(t.state===O)return j(t);if(t.suspense&&L(t.suspense.inFallback))return t.suspense.effects.push(t);const e=[t];for(;(t=t.owner)&&(!t.updatedAt||t.updatedAt<M);)t.state&&e.push(t);for(let n=e.length-1;n>=0;n--)if(t=e[n],t.state===w)B(t);else if(t.state===O){const r=p;p=null,A(()=>j(t,e[0]),!1),p=r}}function A(t,e){if(p)return t();let n=!1;e||(p=[]),_?n=!0:_=[],M++;try{const r=t();return at(n),r}catch(r){n||(_=null),p=null,X(r)}}function at(t){if(p&&(Q(p),p=null),t)return;const e=_;_=null,e.length&&A(()=>rt(e),!1)}function Q(t){for(let e=0;e<t.length;e++)J(t[e])}function j(t,e){t.state=0;for(let n=0;n<t.sources.length;n+=1){const r=t.sources[n];if(r.sources){const s=r.state;s===w?r!==e&&(!r.updatedAt||r.updatedAt<M)&&J(r):s===O&&j(r,e)}}}function W(t){for(let e=0;e<t.observers.length;e+=1){const n=t.observers[e];n.state||(n.state=O,n.pure?p.push(n):_.push(n),n.observers&&W(n))}}function E(t){let e;if(t.sources)for(;t.sources.length;){const n=t.sources.pop(),r=t.sourceSlots.pop(),s=n.observers;if(s&&s.length){const i=s.pop(),l=n.observerSlots.pop();r<s.length&&(i.sourceSlots[l]=r,s[r]=i,n.observerSlots[r]=l)}}if(t.tOwned){for(e=t.tOwned.length-1;e>=0;e--)E(t.tOwned[e]);delete t.tOwned}if(t.owned){for(e=t.owned.length-1;e>=0;e--)E(t.owned[e]);t.owned=null}if(t.cleanups){for(e=t.cleanups.length-1;e>=0;e--)t.cleanups[e]();t.cleanups=null}t.state=0}function ut(t){return t instanceof Error?t:new Error(typeof t=="string"?t:"Unknown error",{cause:t})}function X(t,e=b){throw ut(t)}function x(t,e){return L(()=>t(e||{}))}const $=t=>lt(()=>t());function ft(t,e,n){let r=n.length,s=e.length,i=r,l=0,o=0,c=e[s-1].nextSibling,a=null;for(;l<s||o<i;){if(e[l]===n[o]){l++,o++;continue}for(;e[s-1]===n[i-1];)s--,i--;if(s===l){const u=i<r?o?n[o-1].nextSibling:n[i-o]:c;for(;o<i;)t.insertBefore(n[o++],u)}else if(i===o)for(;l<s;)(!a||!a.has(e[l]))&&e[l].remove(),l++;else if(e[l]===n[i-1]&&n[o]===e[s-1]){const u=e[--s].nextSibling;t.insertBefore(n[o++],e[l++].nextSibling),t.insertBefore(n[--i],u),e[s]=n[i]}else{if(!a){a=new Map;let h=o;for(;h<i;)a.set(n[h],h++)}const u=a.get(e[l]);if(u!=null)if(o<u&&u<i){let h=l,y=1,g;for(;++h<s&&h<i&&!((g=a.get(e[h]))==null||g!==u+y);)y++;if(y>u-o){const d=e[l];for(;o<u;)t.insertBefore(n[o++],d)}else t.replaceChild(n[o++],e[l++])}else l++;else e[l++].remove()}}}const U="_$DX_DELEGATE";function m(t,e,n,r){let s;const i=()=>{const o=document.createElement("template");return o.innerHTML=t,o.content.firstChild},l=()=>(s||(s=i())).cloneNode(!0);return l.cloneNode=l,l}function dt(t,e=window.document){const n=e[U]||(e[U]=new Set);for(let r=0,s=t.length;r<s;r++){const i=t[r];n.has(i)||(n.add(i),e.addEventListener(i,pt))}}function Y(t,e,n){n==null?t.removeAttribute(e):t.setAttribute(e,n)}function ht(t,e,n){if(!e)return n?Y(t,"style"):e;const r=t.style;if(typeof e=="string")return r.cssText=e;typeof n=="string"&&(r.cssText=n=void 0),n||(n={}),e||(e={});let s,i;for(i in n)e[i]==null&&r.removeProperty(i),delete n[i];for(i in e)s=e[i],s!==n[i]&&(r.setProperty(i,s),n[i]=s);return n}function v(t,e,n,r){if(n!==void 0&&!r&&(r=[]),typeof e!="function")return N(t,e,r,n);P(s=>N(t,e(),s,n),r)}function pt(t){let e=t.target;const n=`$$${t.type}`,r=t.target,s=t.currentTarget,i=c=>Object.defineProperty(t,"target",{configurable:!0,value:c}),l=()=>{const c=e[n];if(c&&!e.disabled){const a=e[`${n}Data`];if(a!==void 0?c.call(e,a,t):c.call(e,t),t.cancelBubble)return}return e.host&&typeof e.host!="string"&&!e.host._$host&&e.contains(t.target)&&i(e.host),!0},o=()=>{for(;l()&&(e=e._$host||e.parentNode||e.host););};if(Object.defineProperty(t,"currentTarget",{configurable:!0,get(){return e||document}}),t.composedPath){const c=t.composedPath();i(c[0]);for(let a=0;a<c.length-2&&(e=c[a],!!l());a++){if(e._$host){e=e._$host,o();break}if(e.parentNode===s)break}}else o();i(r)}function N(t,e,n,r,s){for(;typeof n=="function";)n=n();if(e===n)return n;const i=typeof e,l=r!==void 0;if(t=l&&n[0]&&n[0].parentNode||t,i==="string"||i==="number"){if(i==="number"&&(e=e.toString(),e===n))return n;if(l){let o=n[0];o&&o.nodeType===3?o.data!==e&&(o.data=e):o=document.createTextNode(e),n=C(t,n,r,o)}else n!==""&&typeof n=="string"?n=t.firstChild.data=e:n=t.textContent=e}else if(e==null||i==="boolean")n=C(t,n,r);else{if(i==="function")return P(()=>{let o=e();for(;typeof o=="function";)o=o();n=N(t,o,n,r)}),()=>n;if(Array.isArray(e)){const o=[],c=n&&Array.isArray(n);if(F(o,e,n,s))return P(()=>n=N(t,o,n,r,!0)),()=>n;if(o.length===0){if(n=C(t,n,r),l)return n}else c?n.length===0?V(t,o,r):ft(t,n,o):(n&&C(t),V(t,o));n=o}else if(e.nodeType){if(Array.isArray(n)){if(l)return n=C(t,n,r,e);C(t,n,null,e)}else n==null||n===""||!t.firstChild?t.appendChild(e):t.replaceChild(e,t.firstChild);n=e}}return n}function F(t,e,n,r){let s=!1;for(let i=0,l=e.length;i<l;i++){let o=e[i],c=n&&n[t.length],a;if(!(o==null||o===!0||o===!1))if((a=typeof o)=="object"&&o.nodeType)t.push(o);else if(Array.isArray(o))s=F(t,o,c)||s;else if(a==="function")if(r){for(;typeof o=="function";)o=o();s=F(t,Array.isArray(o)?o:[o],Array.isArray(c)?c:[c])||s}else t.push(o),s=!0;else{const u=String(o);c&&c.nodeType===3&&c.data===u?t.push(c):t.push(document.createTextNode(u))}}return s}function V(t,e,n=null){for(let r=0,s=e.length;r<s;r++)t.insertBefore(e[r],n)}function C(t,e,n,r){if(n===void 0)return t.textContent="";const s=r||document.createTextNode("");if(e.length){let i=!1;for(let l=e.length-1;l>=0;l--){const o=e[l];if(s!==o){const c=o.parentNode===t;!i&&!l?c?t.replaceChild(s,o):t.insertBefore(s,n):c&&o.remove()}else i=!0}}else t.insertBefore(s,n);return[s]}function gt(t){return Object.keys(t).reduce((n,r)=>{const s=t[r];return n[r]=Object.assign({},s),et(s.value)&&!Ct(s.value)&&!Array.isArray(s.value)&&(n[r].value=Object.assign({},s.value)),Array.isArray(s.value)&&(n[r].value=s.value.slice(0)),n},{})}function bt(t){return t?Object.keys(t).reduce((n,r)=>{const s=t[r];return n[r]=et(s)&&"value"in s?s:{value:s},n[r].attribute||(n[r].attribute=wt(r)),n[r].parse="parse"in n[r]?n[r].parse:typeof n[r].value!="string",n},{}):{}}function yt(t){return Object.keys(t).reduce((n,r)=>(n[r]=t[r].value,n),{})}function _t(t,e){const n=gt(e);return Object.keys(e).forEach(s=>{const i=n[s],l=t.getAttribute(i.attribute),o=t[s];l!=null&&(i.value=i.parse?tt(l):l),o!=null&&(i.value=Array.isArray(o)?o.slice(0):o),i.reflect&&D(t,i.attribute,i.value,!!i.parse),Object.defineProperty(t,s,{get(){return i.value},set(c){const a=i.value;i.value=c,i.reflect&&D(this,i.attribute,i.value,!!i.parse);for(let u=0,h=this.__propertyChangedCallbacks.length;u<h;u++)this.__propertyChangedCallbacks[u](s,c,a)},enumerable:!0,configurable:!0})}),n}function tt(t){if(t)try{return JSON.parse(t)}catch{return t}}function D(t,e,n,r){if(n==null||n===!1)return t.removeAttribute(e);let s=r?JSON.stringify(n):n;t.__updating[e]=!0,s==="true"&&(s=""),t.setAttribute(e,s),Promise.resolve().then(()=>delete t.__updating[e])}function wt(t){return t.replace(/\.?([A-Z]+)/g,(e,n)=>"-"+n.toLowerCase()).replace("_","-").replace(/^-/,"")}function et(t){return t!=null&&(typeof t=="object"||typeof t=="function")}function Ct(t){return Object.prototype.toString.call(t)==="[object Function]"}function vt(t){return typeof t=="function"&&t.toString().indexOf("class")===0}let I;function St(t,e){const n=Object.keys(e);return class extends t{static get observedAttributes(){return n.map(s=>e[s].attribute)}constructor(){super(),this.__initialized=!1,this.__released=!1,this.__releaseCallbacks=[],this.__propertyChangedCallbacks=[],this.__updating={},this.props={}}connectedCallback(){if(this.__initialized)return;this.__releaseCallbacks=[],this.__propertyChangedCallbacks=[],this.__updating={},this.props=_t(this,e);const s=yt(this.props),i=this.Component,l=I;try{I=this,this.__initialized=!0,vt(i)?new i(s,{element:this}):i(s,{element:this})}finally{I=l}}async disconnectedCallback(){if(await Promise.resolve(),this.isConnected)return;this.__propertyChangedCallbacks.length=0;let s=null;for(;s=this.__releaseCallbacks.pop();)s(this);delete this.__initialized,this.__released=!0}attributeChangedCallback(s,i,l){if(this.__initialized&&!this.__updating[s]&&(s=this.lookupProp(s),s in e)){if(l==null&&!this[s])return;this[s]=e[s].parse?tt(l):l}}lookupProp(s){if(e)return n.find(i=>s===i||s===e[i].attribute)}get renderRoot(){return this.shadowRoot||this.attachShadow({mode:"open"})}addReleaseCallback(s){this.__releaseCallbacks.push(s)}addPropertyChangedCallback(s){this.__propertyChangedCallbacks.push(s)}}}function Et(t,e={},n={}){const{BaseElement:r=HTMLElement,extension:s,customElements:i=window.customElements}=n;return l=>{let o=i.get(t);return o?(o.prototype.Component=l,o):(o=St(r,bt(e)),o.prototype.Component=l,o.prototype.registeredTag=t,i.define(t,o,s),o)}}function At(t){const e=Object.keys(t),n={};for(let r=0;r<e.length;r++){const[s,i]=z(t[e[r]]);Object.defineProperty(n,e[r],{get:s,set(l){i(()=>l)}})}return n}function mt(t){if(t.assignedSlot&&t.assignedSlot._$owner)return t.assignedSlot._$owner;let e=t.parentNode;for(;e&&!e._$owner&&!(e.assignedSlot&&e.assignedSlot._$owner);)e=e.parentNode;return e&&e.assignedSlot?e.assignedSlot._$owner:t._$owner}function xt(t){return(e,n)=>{const{element:r}=n;return ot(s=>{const i=At(e);r.addPropertyChangedCallback((o,c)=>i[o]=c),r.addReleaseCallback(()=>{r.renderRoot.textContent="",s()});const l=t(i,n);return v(r.renderRoot,l)},mt(r))}}function $t(t,e,n){return arguments.length===2&&(n=e,e={}),Et(t,e)(xt(n))}const kt=`
1
+ "use strict";const st=(t,e)=>t===e,T={equals:st};let rt=Q;const w=1,O=2,q={owned:null,cleanups:null,context:null,owner:null};var b=null;let R=null,it=null,f=null,p=null,_=null,B=0;function ot(t,e){const n=f,r=b,s=t.length===0,i=e===void 0?r:e,l=s?q:{owned:null,cleanups:null,context:i?i.context:null,owner:i},o=s?t:()=>t(()=>L(()=>E(l)));b=l,f=null;try{return A(o,!0)}finally{f=n,b=r}}function z(t,e){e=e?Object.assign({},T,e):T;const n={value:t,observers:null,observerSlots:null,comparator:e.equals||void 0},r=s=>(typeof s=="function"&&(s=s(n.value)),H(n,s));return[G.bind(n),r]}function P(t,e,n){const r=Z(t,e,!1,w);M(r)}function lt(t,e,n){n=n?Object.assign({},T,n):T;const r=Z(t,e,!0,0);return r.observers=null,r.observerSlots=null,r.comparator=n.equals||void 0,M(r),G.bind(r)}function L(t){if(f===null)return t();const e=f;f=null;try{return t()}finally{f=e}}function G(){if(this.sources&&this.state)if(this.state===w)M(this);else{const t=p;p=null,A(()=>j(this),!1),p=t}if(f){const t=this.observers?this.observers.length:0;f.sources?(f.sources.push(this),f.sourceSlots.push(t)):(f.sources=[this],f.sourceSlots=[t]),this.observers?(this.observers.push(f),this.observerSlots.push(f.sources.length-1)):(this.observers=[f],this.observerSlots=[f.sources.length-1])}return this.value}function H(t,e,n){let r=t.value;return(!t.comparator||!t.comparator(r,e))&&(t.value=e,t.observers&&t.observers.length&&A(()=>{for(let s=0;s<t.observers.length;s+=1){const i=t.observers[s],l=R&&R.running;l&&R.disposed.has(i),(l?!i.tState:!i.state)&&(i.pure?p.push(i):_.push(i),i.observers&&W(i)),l||(i.state=w)}if(p.length>1e6)throw p=[],new Error},!1)),e}function M(t){if(!t.fn)return;E(t);const e=B;ct(t,t.value,e)}function ct(t,e,n){let r;const s=b,i=f;f=b=t;try{r=t.fn(e)}catch(l){return t.pure&&(t.state=w,t.owned&&t.owned.forEach(E),t.owned=null),t.updatedAt=n+1,X(l)}finally{f=i,b=s}(!t.updatedAt||t.updatedAt<=n)&&(t.updatedAt!=null&&"observers"in t?H(t,r):t.value=r,t.updatedAt=n)}function Z(t,e,n,r=w,s){const i={fn:t,state:r,updatedAt:null,owned:null,sources:null,sourceSlots:null,cleanups:null,value:e,owner:b,context:b?b.context:null,pure:n};return b===null||b!==q&&(b.owned?b.owned.push(i):b.owned=[i]),i}function J(t){if(t.state===0)return;if(t.state===O)return j(t);if(t.suspense&&L(t.suspense.inFallback))return t.suspense.effects.push(t);const e=[t];for(;(t=t.owner)&&(!t.updatedAt||t.updatedAt<B);)t.state&&e.push(t);for(let n=e.length-1;n>=0;n--)if(t=e[n],t.state===w)M(t);else if(t.state===O){const r=p;p=null,A(()=>j(t,e[0]),!1),p=r}}function A(t,e){if(p)return t();let n=!1;e||(p=[]),_?n=!0:_=[],B++;try{const r=t();return at(n),r}catch(r){n||(_=null),p=null,X(r)}}function at(t){if(p&&(Q(p),p=null),t)return;const e=_;_=null,e.length&&A(()=>rt(e),!1)}function Q(t){for(let e=0;e<t.length;e++)J(t[e])}function j(t,e){t.state=0;for(let n=0;n<t.sources.length;n+=1){const r=t.sources[n];if(r.sources){const s=r.state;s===w?r!==e&&(!r.updatedAt||r.updatedAt<B)&&J(r):s===O&&j(r,e)}}}function W(t){for(let e=0;e<t.observers.length;e+=1){const n=t.observers[e];n.state||(n.state=O,n.pure?p.push(n):_.push(n),n.observers&&W(n))}}function E(t){let e;if(t.sources)for(;t.sources.length;){const n=t.sources.pop(),r=t.sourceSlots.pop(),s=n.observers;if(s&&s.length){const i=s.pop(),l=n.observerSlots.pop();r<s.length&&(i.sourceSlots[l]=r,s[r]=i,n.observerSlots[r]=l)}}if(t.tOwned){for(e=t.tOwned.length-1;e>=0;e--)E(t.tOwned[e]);delete t.tOwned}if(t.owned){for(e=t.owned.length-1;e>=0;e--)E(t.owned[e]);t.owned=null}if(t.cleanups){for(e=t.cleanups.length-1;e>=0;e--)t.cleanups[e]();t.cleanups=null}t.state=0}function ut(t){return t instanceof Error?t:new Error(typeof t=="string"?t:"Unknown error",{cause:t})}function X(t,e=b){throw ut(t)}function x(t,e){return L(()=>t(e||{}))}const $=t=>lt(()=>t());function ft(t,e,n){let r=n.length,s=e.length,i=r,l=0,o=0,c=e[s-1].nextSibling,a=null;for(;l<s||o<i;){if(e[l]===n[o]){l++,o++;continue}for(;e[s-1]===n[i-1];)s--,i--;if(s===l){const u=i<r?o?n[o-1].nextSibling:n[i-o]:c;for(;o<i;)t.insertBefore(n[o++],u)}else if(i===o)for(;l<s;)(!a||!a.has(e[l]))&&e[l].remove(),l++;else if(e[l]===n[i-1]&&n[o]===e[s-1]){const u=e[--s].nextSibling;t.insertBefore(n[o++],e[l++].nextSibling),t.insertBefore(n[--i],u),e[s]=n[i]}else{if(!a){a=new Map;let h=o;for(;h<i;)a.set(n[h],h++)}const u=a.get(e[l]);if(u!=null)if(o<u&&u<i){let h=l,y=1,g;for(;++h<s&&h<i&&!((g=a.get(e[h]))==null||g!==u+y);)y++;if(y>u-o){const d=e[l];for(;o<u;)t.insertBefore(n[o++],d)}else t.replaceChild(n[o++],e[l++])}else l++;else e[l++].remove()}}}const U="_$DX_DELEGATE";function m(t,e,n,r){let s;const i=()=>{const o=document.createElement("template");return o.innerHTML=t,o.content.firstChild},l=()=>(s||(s=i())).cloneNode(!0);return l.cloneNode=l,l}function dt(t,e=window.document){const n=e[U]||(e[U]=new Set);for(let r=0,s=t.length;r<s;r++){const i=t[r];n.has(i)||(n.add(i),e.addEventListener(i,pt))}}function Y(t,e,n){n==null?t.removeAttribute(e):t.setAttribute(e,n)}function ht(t,e,n){if(!e)return n?Y(t,"style"):e;const r=t.style;if(typeof e=="string")return r.cssText=e;typeof n=="string"&&(r.cssText=n=void 0),n||(n={}),e||(e={});let s,i;for(i in n)e[i]==null&&r.removeProperty(i),delete n[i];for(i in e)s=e[i],s!==n[i]&&(r.setProperty(i,s),n[i]=s);return n}function S(t,e,n,r){if(n!==void 0&&!r&&(r=[]),typeof e!="function")return N(t,e,r,n);P(s=>N(t,e(),s,n),r)}function pt(t){let e=t.target;const n=`$$${t.type}`,r=t.target,s=t.currentTarget,i=c=>Object.defineProperty(t,"target",{configurable:!0,value:c}),l=()=>{const c=e[n];if(c&&!e.disabled){const a=e[`${n}Data`];if(a!==void 0?c.call(e,a,t):c.call(e,t),t.cancelBubble)return}return e.host&&typeof e.host!="string"&&!e.host._$host&&e.contains(t.target)&&i(e.host),!0},o=()=>{for(;l()&&(e=e._$host||e.parentNode||e.host););};if(Object.defineProperty(t,"currentTarget",{configurable:!0,get(){return e||document}}),t.composedPath){const c=t.composedPath();i(c[0]);for(let a=0;a<c.length-2&&(e=c[a],!!l());a++){if(e._$host){e=e._$host,o();break}if(e.parentNode===s)break}}else o();i(r)}function N(t,e,n,r,s){for(;typeof n=="function";)n=n();if(e===n)return n;const i=typeof e,l=r!==void 0;if(t=l&&n[0]&&n[0].parentNode||t,i==="string"||i==="number"){if(i==="number"&&(e=e.toString(),e===n))return n;if(l){let o=n[0];o&&o.nodeType===3?o.data!==e&&(o.data=e):o=document.createTextNode(e),n=C(t,n,r,o)}else n!==""&&typeof n=="string"?n=t.firstChild.data=e:n=t.textContent=e}else if(e==null||i==="boolean")n=C(t,n,r);else{if(i==="function")return P(()=>{let o=e();for(;typeof o=="function";)o=o();n=N(t,o,n,r)}),()=>n;if(Array.isArray(e)){const o=[],c=n&&Array.isArray(n);if(F(o,e,n,s))return P(()=>n=N(t,o,n,r,!0)),()=>n;if(o.length===0){if(n=C(t,n,r),l)return n}else c?n.length===0?V(t,o,r):ft(t,n,o):(n&&C(t),V(t,o));n=o}else if(e.nodeType){if(Array.isArray(n)){if(l)return n=C(t,n,r,e);C(t,n,null,e)}else n==null||n===""||!t.firstChild?t.appendChild(e):t.replaceChild(e,t.firstChild);n=e}}return n}function F(t,e,n,r){let s=!1;for(let i=0,l=e.length;i<l;i++){let o=e[i],c=n&&n[t.length],a;if(!(o==null||o===!0||o===!1))if((a=typeof o)=="object"&&o.nodeType)t.push(o);else if(Array.isArray(o))s=F(t,o,c)||s;else if(a==="function")if(r){for(;typeof o=="function";)o=o();s=F(t,Array.isArray(o)?o:[o],Array.isArray(c)?c:[c])||s}else t.push(o),s=!0;else{const u=String(o);c&&c.nodeType===3&&c.data===u?t.push(c):t.push(document.createTextNode(u))}}return s}function V(t,e,n=null){for(let r=0,s=e.length;r<s;r++)t.insertBefore(e[r],n)}function C(t,e,n,r){if(n===void 0)return t.textContent="";const s=r||document.createTextNode("");if(e.length){let i=!1;for(let l=e.length-1;l>=0;l--){const o=e[l];if(s!==o){const c=o.parentNode===t;!i&&!l?c?t.replaceChild(s,o):t.insertBefore(s,n):c&&o.remove()}else i=!0}}else t.insertBefore(s,n);return[s]}function gt(t){return Object.keys(t).reduce((n,r)=>{const s=t[r];return n[r]=Object.assign({},s),et(s.value)&&!Ct(s.value)&&!Array.isArray(s.value)&&(n[r].value=Object.assign({},s.value)),Array.isArray(s.value)&&(n[r].value=s.value.slice(0)),n},{})}function bt(t){return t?Object.keys(t).reduce((n,r)=>{const s=t[r];return n[r]=et(s)&&"value"in s?s:{value:s},n[r].attribute||(n[r].attribute=wt(r)),n[r].parse="parse"in n[r]?n[r].parse:typeof n[r].value!="string",n},{}):{}}function yt(t){return Object.keys(t).reduce((n,r)=>(n[r]=t[r].value,n),{})}function _t(t,e){const n=gt(e);return Object.keys(e).forEach(s=>{const i=n[s],l=t.getAttribute(i.attribute),o=t[s];l!=null&&(i.value=i.parse?tt(l):l),o!=null&&(i.value=Array.isArray(o)?o.slice(0):o),i.reflect&&D(t,i.attribute,i.value,!!i.parse),Object.defineProperty(t,s,{get(){return i.value},set(c){const a=i.value;i.value=c,i.reflect&&D(this,i.attribute,i.value,!!i.parse);for(let u=0,h=this.__propertyChangedCallbacks.length;u<h;u++)this.__propertyChangedCallbacks[u](s,c,a)},enumerable:!0,configurable:!0})}),n}function tt(t){if(t)try{return JSON.parse(t)}catch{return t}}function D(t,e,n,r){if(n==null||n===!1)return t.removeAttribute(e);let s=r?JSON.stringify(n):n;t.__updating[e]=!0,s==="true"&&(s=""),t.setAttribute(e,s),Promise.resolve().then(()=>delete t.__updating[e])}function wt(t){return t.replace(/\.?([A-Z]+)/g,(e,n)=>"-"+n.toLowerCase()).replace("_","-").replace(/^-/,"")}function et(t){return t!=null&&(typeof t=="object"||typeof t=="function")}function Ct(t){return Object.prototype.toString.call(t)==="[object Function]"}function vt(t){return typeof t=="function"&&t.toString().indexOf("class")===0}let I;function St(t,e){const n=Object.keys(e);return class extends t{static get observedAttributes(){return n.map(s=>e[s].attribute)}constructor(){super(),this.__initialized=!1,this.__released=!1,this.__releaseCallbacks=[],this.__propertyChangedCallbacks=[],this.__updating={},this.props={}}connectedCallback(){if(this.__initialized)return;this.__releaseCallbacks=[],this.__propertyChangedCallbacks=[],this.__updating={},this.props=_t(this,e);const s=yt(this.props),i=this.Component,l=I;try{I=this,this.__initialized=!0,vt(i)?new i(s,{element:this}):i(s,{element:this})}finally{I=l}}async disconnectedCallback(){if(await Promise.resolve(),this.isConnected)return;this.__propertyChangedCallbacks.length=0;let s=null;for(;s=this.__releaseCallbacks.pop();)s(this);delete this.__initialized,this.__released=!0}attributeChangedCallback(s,i,l){if(this.__initialized&&!this.__updating[s]&&(s=this.lookupProp(s),s in e)){if(l==null&&!this[s])return;this[s]=e[s].parse?tt(l):l}}lookupProp(s){if(e)return n.find(i=>s===i||s===e[i].attribute)}get renderRoot(){return this.shadowRoot||this.attachShadow({mode:"open"})}addReleaseCallback(s){this.__releaseCallbacks.push(s)}addPropertyChangedCallback(s){this.__propertyChangedCallbacks.push(s)}}}function Et(t,e={},n={}){const{BaseElement:r=HTMLElement,extension:s,customElements:i=window.customElements}=n;return l=>{let o=i.get(t);return o?(o.prototype.Component=l,o):(o=St(r,bt(e)),o.prototype.Component=l,o.prototype.registeredTag=t,i.define(t,o,s),o)}}function At(t){const e=Object.keys(t),n={};for(let r=0;r<e.length;r++){const[s,i]=z(t[e[r]]);Object.defineProperty(n,e[r],{get:s,set(l){i(()=>l)}})}return n}function mt(t){if(t.assignedSlot&&t.assignedSlot._$owner)return t.assignedSlot._$owner;let e=t.parentNode;for(;e&&!e._$owner&&!(e.assignedSlot&&e.assignedSlot._$owner);)e=e.parentNode;return e&&e.assignedSlot?e.assignedSlot._$owner:t._$owner}function xt(t){return(e,n)=>{const{element:r}=n;return ot(s=>{const i=At(e);r.addPropertyChangedCallback((o,c)=>i[o]=c),r.addReleaseCallback(()=>{r.renderRoot.textContent="",s()});const l=t(i,n);return S(r.renderRoot,l)},mt(r))}}function $t(t,e,n){return arguments.length===2&&(n=e,e={}),Et(t,e)(xt(n))}const kt=`
2
2
  :host([theme="dark"]) {
3
3
  color-scheme: only dark;
4
4
  }
@@ -33,4 +33,4 @@
33
33
  0% { transform: rotate(0deg); }
34
34
  100% { transform: rotate(360deg); }
35
35
  }
36
- `;var Tt=m("<div part=container class=dictate-button__container><style></style><button part=button class=dictate-button__button>"),Ot=m('<svg part=icon class="dictate-button__icon dictate-button__icon--idle"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor><path stroke-linecap=round stroke-linejoin=round d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z">'),Pt=m('<svg part=icon class="dictate-button__icon dictate-button__icon--recording"viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd d="M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z"clip-rule=evenodd>'),jt=m('<svg part=icon class="dictate-button__icon dictate-button__icon--processing"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor><path stroke-linecap=round stroke-linejoin=round d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99">'),Nt=m('<svg part=icon class="dictate-button__icon dictate-button__icon--error"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor><path stroke-linecap=round stroke-linejoin=round d="M6 18 18 6M6 6l12 12">');console.debug("dictate-button version:","0.1.0");const Mt="https://api.dictate-button.io/transcribe",k="dictate-button.io";$t("dictate-button",{size:24,apiEndpoint:Mt},(t,{element:e})=>{const{size:n,apiEndpoint:r}=t;console.log("api",r);const[s,i]=z("idle");let l=null,o=[];const c=()=>{l&&l.state!=="inactive"&&l.stop(),o=[]};e.addEventListener("disconnected",c);const a=async()=>{if(c(),s()==="idle")try{const h=await navigator.mediaDevices.getUserMedia({audio:!0});l=new MediaRecorder(h,{mimeType:"audio/webm"}),o=[],l.ondataavailable=y=>{o.push(y.data)},l.onstop=async()=>{i("processing");const y=new Blob(o,{type:"audio/webm"});try{const g=await fetch(r,{method:"POST",body:y});if(!g.ok)throw new Error("Failed to transcribe audio");const d=await g.json();if(s()!=="processing")return;S(e,"transcribed",d.text),i("idle")}catch(g){console.error("Failed to transcribe audio:",g),S(e,"error","Failed to transcribe audio"),u()}},l.start(),S(e,"started","Started recording"),i("recording")}catch(h){console.error("Failed to start recording:",h),S(e,"error","Failed to start recording"),u()}else S(e,"stopped","Stopped recording"),i("idle")},u=()=>{i("error"),setTimeout(()=>i("idle"),2e3)};return(()=>{var h=Tt(),y=h.firstChild,g=y.nextSibling;return v(y,kt),g.$$click=a,v(g,(()=>{var d=$(()=>s()==="idle");return()=>d()&&x(Rt,{})})(),null),v(g,(()=>{var d=$(()=>s()==="recording");return()=>d()&&x(It,{})})(),null),v(g,(()=>{var d=$(()=>s()==="processing");return()=>d()&&x(Ft,{})})(),null),v(g,(()=>{var d=$(()=>s()==="error");return()=>d()&&x(Lt,{})})(),null),P(d=>{var nt=`width:${n}px;height:${n}px"`,K=Bt(s());return d.e=ht(g,nt,d.e),K!==d.t&&Y(g,"title",d.t=K),d},{e:void 0,t:void 0}),h})()});const Bt=t=>{switch(t){case"idle":return`Start dictation (${k})`;case"recording":return`Stop dictation (${k})`;case"processing":return`Stop processing (${k})`;case"error":return`Click to reset (${k})`}},S=(t,e,n)=>{t.dispatchEvent(new CustomEvent(e,{detail:n,bubbles:!0,composed:!0}))},Rt=()=>Ot(),It=()=>Pt(),Ft=()=>jt(),Lt=()=>Nt();dt(["click"]);
36
+ `;var Tt=m("<div part=container class=dictate-button__container><style></style><button part=button class=dictate-button__button>"),Ot=m('<svg part=icon class="dictate-button__icon dictate-button__icon--idle"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor><path stroke-linecap=round stroke-linejoin=round d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z">'),Pt=m('<svg part=icon class="dictate-button__icon dictate-button__icon--recording"viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd d="M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z"clip-rule=evenodd>'),jt=m('<svg part=icon class="dictate-button__icon dictate-button__icon--processing"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor><path stroke-linecap=round stroke-linejoin=round d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99">'),Nt=m('<svg part=icon class="dictate-button__icon dictate-button__icon--error"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor><path stroke-linecap=round stroke-linejoin=round d="M6 18 18 6M6 6l12 12">');console.debug("dictate-button version:","0.2.0");const Bt="https://api.dictate-button.io/transcribe",k="dictate-button.io";$t("dictate-button",{size:24,apiEndpoint:Bt},(t,{element:e})=>{const{size:n,apiEndpoint:r}=t;console.debug("api",r);const[s,i]=z("idle");let l=null,o=[];const c=()=>{l&&l.state!=="inactive"&&l.stop(),o=[]};e.addEventListener("disconnected",c);const a=async()=>{if(c(),s()==="idle")try{const h=await navigator.mediaDevices.getUserMedia({audio:!0});l=new MediaRecorder(h,{mimeType:"audio/webm"}),o=[],l.ondataavailable=y=>{o.push(y.data)},l.onstop=async()=>{i("processing"),v(e,"transcribing:started","Started transcribing");const y=new Blob(o,{type:"audio/webm"});try{const g=await fetch(r,{method:"POST",body:y});if(!g.ok)throw new Error("Failed to transcribe audio");const d=await g.json();if(s()!=="processing")return;v(e,"transcribing:finished",d.text),i("idle")}catch(g){console.error("Failed to transcribe audio:",g),v(e,"transcribing:failed","Failed to transcribe audio"),u()}},l.start(),v(e,"recording:started","Started recording"),i("recording")}catch(h){console.error("Failed to start recording:",h),v(e,"recording:failed","Failed to start recording"),u()}else v(e,"recording:stopped","Stopped recording"),i("idle")},u=()=>{i("error"),setTimeout(()=>i("idle"),2e3)};return(()=>{var h=Tt(),y=h.firstChild,g=y.nextSibling;return S(y,kt),g.$$click=a,S(g,(()=>{var d=$(()=>s()==="idle");return()=>d()&&x(Rt,{})})(),null),S(g,(()=>{var d=$(()=>s()==="recording");return()=>d()&&x(It,{})})(),null),S(g,(()=>{var d=$(()=>s()==="processing");return()=>d()&&x(Ft,{})})(),null),S(g,(()=>{var d=$(()=>s()==="error");return()=>d()&&x(Lt,{})})(),null),P(d=>{var nt=`width:${n}px;height:${n}px"`,K=Mt(s());return d.e=ht(g,nt,d.e),K!==d.t&&Y(g,"title",d.t=K),d},{e:void 0,t:void 0}),h})()});const Mt=t=>{switch(t){case"idle":return`Start dictation (${k})`;case"recording":return`Stop dictation (${k})`;case"processing":return`Stop processing (${k})`;case"error":return`Click to reset (${k})`}},v=(t,e,n)=>{t.dispatchEvent(new CustomEvent(e,{detail:n,bubbles:!0,composed:!0}))},Rt=()=>Ot(),It=()=>Pt(),Ft=()=>jt(),Lt=()=>Nt();dt(["click"]);
package/dist/dictate-button.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export interface BtnDictateProps {
1
+ export interface DictateButtonProps {
2
2
  size?: number;
3
3
  apiEndpoint?: string;
4
4
  theme?: 'light' | 'dark';
@@ -7,7 +7,7 @@ export interface BtnDictateProps {
7
7
  declare module 'solid-js' {
8
8
  namespace JSX {
9
9
  interface IntrinsicElements {
10
- 'dictate-button': BtnDictateProps;
10
+ 'dictate-button': Element & DictateButtonProps;
11
11
  }
12
12
  }
13
13
  }
package/dist/dictate-button.es.js CHANGED
@@ -9,7 +9,7 @@ const w = 1, O = 2, q = {
9
9
  owner: null
10
10
  };
11
11
  var b = null;
12
- let R = null, it = null, f = null, p = null, _ = null, M = 0;
12
+ let R = null, it = null, f = null, p = null, _ = null, B = 0;
13
13
  function ot(t, e) {
14
14
  const n = f, r = b, s = t.length === 0, i = e === void 0 ? r : e, l = s ? q : {
15
15
  owned: null,
@@ -36,12 +36,12 @@ function z(t, e) {
36
36
  }
37
37
  function P(t, e, n) {
38
38
  const r = Z(t, e, !1, w);
39
- B(r);
39
+ M(r);
40
40
  }
41
41
  function lt(t, e, n) {
42
42
  n = n ? Object.assign({}, T, n) : T;
43
43
  const r = Z(t, e, !0, 0);
44
- return r.observers = null, r.observerSlots = null, r.comparator = n.equals || void 0, B(r), G.bind(r);
44
+ return r.observers = null, r.observerSlots = null, r.comparator = n.equals || void 0, M(r), G.bind(r);
45
45
  }
46
46
  function L(t) {
47
47
  if (f === null) return t();
@@ -55,7 +55,7 @@ function L(t) {
55
55
  }
56
56
  function G() {
57
57
  if (this.sources && this.state)
58
- if (this.state === w) B(this);
58
+ if (this.state === w) M(this);
59
59
  else {
60
60
  const t = p;
61
61
  p = null, A(() => j(this), !1), p = t;
@@ -77,10 +77,10 @@ function H(t, e, n) {
77
77
  throw p = [], new Error();
78
78
  }, !1)), e;
79
79
  }
80
- function B(t) {
80
+ function M(t) {
81
81
  if (!t.fn) return;
82
82
  E(t);
83
- const e = M;
83
+ const e = B;
84
84
  ct(t, t.value, e);
85
85
  }
86
86
  function ct(t, e, n) {
@@ -117,11 +117,11 @@ function J(t) {
117
117
  if (t.state === O) return j(t);
118
118
  if (t.suspense && L(t.suspense.inFallback)) return t.suspense.effects.push(t);
119
119
  const e = [t];
120
- for (; (t = t.owner) && (!t.updatedAt || t.updatedAt < M); )
120
+ for (; (t = t.owner) && (!t.updatedAt || t.updatedAt < B); )
121
121
  t.state && e.push(t);
122
122
  for (let n = e.length - 1; n >= 0; n--)
123
123
  if (t = e[n], t.state === w)
124
- B(t);
124
+ M(t);
125
125
  else if (t.state === O) {
126
126
  const r = p;
127
127
  p = null, A(() => j(t, e[0]), !1), p = r;
@@ -130,7 +130,7 @@ function J(t) {
130
130
  function A(t, e) {
131
131
  if (p) return t();
132
132
  let n = !1;
133
- e || (p = []), _ ? n = !0 : _ = [], M++;
133
+ e || (p = []), _ ? n = !0 : _ = [], B++;
134
134
  try {
135
135
  const r = t();
136
136
  return at(n), r;
@@ -152,7 +152,7 @@ function j(t, e) {
152
152
  const r = t.sources[n];
153
153
  if (r.sources) {
154
154
  const s = r.state;
155
- s === w ? r !== e && (!r.updatedAt || r.updatedAt < M) && J(r) : s === O && j(r, e);
155
+ s === w ? r !== e && (!r.updatedAt || r.updatedAt < B) && J(r) : s === O && j(r, e);
156
156
  }
157
157
  }
158
158
  }
@@ -268,7 +268,7 @@ function ht(t, e, n) {
268
268
  s = e[i], s !== n[i] && (r.setProperty(i, s), n[i] = s);
269
269
  return n;
270
270
  }
271
- function v(t, e, n, r) {
271
+ function S(t, e, n, r) {
272
272
  if (n !== void 0 && !r && (r = []), typeof e != "function") return N(t, e, r, n);
273
273
  P((s) => N(t, e(), s, n), r);
274
274
  }
@@ -539,7 +539,7 @@ function xt(t) {
539
539
  r.renderRoot.textContent = "", s();
540
540
  });
541
541
  const l = t(i, n);
542
- return v(r.renderRoot, l);
542
+ return S(r.renderRoot, l);
543
543
  }, mt(r));
544
544
  };
545
545
  }
@@ -583,11 +583,11 @@ const kt = `
583
583
  }
584
584
  `;
585
585
  var Tt = /* @__PURE__ */ m("<div part=container class=dictate-button__container><style></style><button part=button class=dictate-button__button>"), Ot = /* @__PURE__ */ m('<svg part=icon class="dictate-button__icon dictate-button__icon--idle"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor><path stroke-linecap=round stroke-linejoin=round d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z">'), Pt = /* @__PURE__ */ m('<svg part=icon class="dictate-button__icon dictate-button__icon--recording"viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd d="M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z"clip-rule=evenodd>'), jt = /* @__PURE__ */ m('<svg part=icon class="dictate-button__icon dictate-button__icon--processing"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor><path stroke-linecap=round stroke-linejoin=round d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99">'), Nt = /* @__PURE__ */ m('<svg part=icon class="dictate-button__icon dictate-button__icon--error"fill=none viewBox="0 0 24 24"stroke-width=1.5 stroke=currentColor><path stroke-linecap=round stroke-linejoin=round d="M6 18 18 6M6 6l12 12">');
586
- console.debug("dictate-button version:", "0.1.0");
587
- const Mt = "https://api.dictate-button.io/transcribe", k = "dictate-button.io";
586
+ console.debug("dictate-button version:", "0.2.0");
587
+ const Bt = "https://api.dictate-button.io/transcribe", k = "dictate-button.io";
588
588
  $t("dictate-button", {
589
589
  size: 24,
590
- apiEndpoint: Mt
590
+ apiEndpoint: Bt
591
591
  }, (t, {
592
592
  element: e
593
593
  }) => {
@@ -595,7 +595,7 @@ $t("dictate-button", {
595
595
  size: n,
596
596
  apiEndpoint: r
597
597
  } = t;
598
- console.log("api", r);
598
+ console.debug("api", r);
599
599
  const [s, i] = z("idle");
600
600
  let l = null, o = [];
601
601
  const c = () => {
@@ -613,7 +613,7 @@ $t("dictate-button", {
613
613
  }), o = [], l.ondataavailable = (y) => {
614
614
  o.push(y.data);
615
615
  }, l.onstop = async () => {
616
- i("processing");
616
+ i("processing"), v(e, "transcribing:started", "Started transcribing");
617
617
  const y = new Blob(o, {
618
618
  type: "audio/webm"
619
619
  });
@@ -625,35 +625,35 @@ $t("dictate-button", {
625
625
  if (!g.ok) throw new Error("Failed to transcribe audio");
626
626
  const d = await g.json();
627
627
  if (s() !== "processing") return;
628
- S(e, "transcribed", d.text), i("idle");
628
+ v(e, "transcribing:finished", d.text), i("idle");
629
629
  } catch (g) {
630
- console.error("Failed to transcribe audio:", g), S(e, "error", "Failed to transcribe audio"), u();
630
+ console.error("Failed to transcribe audio:", g), v(e, "transcribing:failed", "Failed to transcribe audio"), u();
631
631
  }
632
- }, l.start(), S(e, "started", "Started recording"), i("recording");
632
+ }, l.start(), v(e, "recording:started", "Started recording"), i("recording");
633
633
  } catch (h) {
634
- console.error("Failed to start recording:", h), S(e, "error", "Failed to start recording"), u();
634
+ console.error("Failed to start recording:", h), v(e, "recording:failed", "Failed to start recording"), u();
635
635
  }
636
636
  else
637
- S(e, "stopped", "Stopped recording"), i("idle");
637
+ v(e, "recording:stopped", "Stopped recording"), i("idle");
638
638
  }, u = () => {
639
639
  i("error"), setTimeout(() => i("idle"), 2e3);
640
640
  };
641
641
  return (() => {
642
642
  var h = Tt(), y = h.firstChild, g = y.nextSibling;
643
- return v(y, kt), g.$$click = a, v(g, (() => {
643
+ return S(y, kt), g.$$click = a, S(g, (() => {
644
644
  var d = $(() => s() === "idle");
645
645
  return () => d() && x(Rt, {});
646
- })(), null), v(g, (() => {
646
+ })(), null), S(g, (() => {
647
647
  var d = $(() => s() === "recording");
648
648
  return () => d() && x(It, {});
649
- })(), null), v(g, (() => {
649
+ })(), null), S(g, (() => {
650
650
  var d = $(() => s() === "processing");
651
651
  return () => d() && x(Ft, {});
652
- })(), null), v(g, (() => {
652
+ })(), null), S(g, (() => {
653
653
  var d = $(() => s() === "error");
654
654
  return () => d() && x(Lt, {});
655
655
  })(), null), P((d) => {
656
- var nt = `width:${n}px;height:${n}px"`, K = Bt(s());
656
+ var nt = `width:${n}px;height:${n}px"`, K = Mt(s());
657
657
  return d.e = ht(g, nt, d.e), K !== d.t && Y(g, "title", d.t = K), d;
658
658
  }, {
659
659
  e: void 0,
@@ -661,7 +661,7 @@ $t("dictate-button", {
661
661
  }), h;
662
662
  })();
663
663
  });
664
- const Bt = (t) => {
664
+ const Mt = (t) => {
665
665
  switch (t) {
666
666
  case "idle":
667
667
  return `Start dictation (${k})`;
@@ -672,7 +672,7 @@ const Bt = (t) => {
672
672
  case "error":
673
673
  return `Click to reset (${k})`;
674
674
  }
675
- }, S = (t, e, n) => {
675
+ }, v = (t, e, n) => {
676
676
  t.dispatchEvent(new CustomEvent(e, {
677
677
  detail: n,
678
678
  bubbles: !0,
package/dist/dictate-button.styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const btnDictateStyles = "\n:host([theme=\"dark\"]) {\n color-scheme: only dark;\n}\n:host([theme=\"light\"]) {\n color-scheme: only light;\n}\n\n:host .dictate-button__container {\n margin: 5px;\n}\n\n:host .dictate-button__button {\n cursor: pointer;\n padding: 2px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n opacity: 0.8;\n transition: opacity 0.2s ease-in-out;\n}\n\n:host .dictate-button__button .dictate-button__icon {\n width: 100%;\n height: 100%;\n}\n\n:host .dictate-button__button .dictate-button__icon.dictate-button__icon--processing {\n animation: dictate-button-rotate 1s linear infinite;\n}\n\n@keyframes dictate-button-rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n";
1
+ export declare const dictateButtonStyles = "\n:host([theme=\"dark\"]) {\n color-scheme: only dark;\n}\n:host([theme=\"light\"]) {\n color-scheme: only light;\n}\n\n:host .dictate-button__container {\n margin: 5px;\n}\n\n:host .dictate-button__button {\n cursor: pointer;\n padding: 2px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n opacity: 0.8;\n transition: opacity 0.2s ease-in-out;\n}\n\n:host .dictate-button__button .dictate-button__icon {\n width: 100%;\n height: 100%;\n}\n\n:host .dictate-button__button .dictate-button__icon.dictate-button__icon--processing {\n animation: dictate-button-rotate 1s linear infinite;\n}\n\n@keyframes dictate-button-rotate {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n";
package/dist/inject-exclusive.cjs.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";function i(){const a=document.querySelectorAll('textarea[data-dictate-button-on]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-on]:not([data-dictate-button-enabled]), textarea[data-dictate-button-target]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-target]:not([data-dictate-button-enabled])');for(const o of a){const n=document.createElement("div");n.style.position="relative",n.style.display="inline-block",n.style.width="auto",n.style.color="inherit",o.parentNode.insertBefore(n,o),o.setAttribute("data-dictate-button-enabled",""),n.appendChild(o),o.style.boxSizing="border-box";const t=document.createElement("dictate-button");t.size=24,t.style.position="absolute",t.style.right="0",t.style.top="0",t.addEventListener("recording:started",e=>{console.log("recording:started",e)}),t.addEventListener("recording:stopped",e=>{console.log("recording:stopped",e)}),t.addEventListener("recording:failed",e=>{console.log("recording:failed",e)}),t.addEventListener("transcribing:started",e=>{console.log("transcribing:started",e)}),t.addEventListener("transcribing:finished",e=>{console.log("transcribing:finished",e);const d=e.detail;r(o,d)}),t.addEventListener("transcribing:failed",e=>{console.log("transcribing:failed",e)}),n.appendChild(t)}}function r(a,o){const n=a.selectionStart||0,t=a.selectionEnd||0;a.value=a.value.substring(0,n)+o+a.value.substring(t)}document.addEventListener("DOMContentLoaded",()=>{i(),new MutationObserver(i).observe(document.body,{childList:!0,subtree:!0})});
package/dist/inject-exclusive.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {}
package/dist/inject-exclusive.es.js ADDED
@@ -0,0 +1,35 @@
1
+ function i() {
2
+ const a = document.querySelectorAll(
3
+ 'textarea[data-dictate-button-on]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-on]:not([data-dictate-button-enabled]), textarea[data-dictate-button-target]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-target]:not([data-dictate-button-enabled])'
4
+ );
5
+ for (const o of a) {
6
+ const n = document.createElement("div");
7
+ n.style.position = "relative", n.style.display = "inline-block", n.style.width = "auto", n.style.color = "inherit", o.parentNode.insertBefore(n, o), o.setAttribute("data-dictate-button-enabled", ""), n.appendChild(o), o.style.boxSizing = "border-box";
8
+ const t = document.createElement("dictate-button");
9
+ t.size = 24, t.style.position = "absolute", t.style.right = "0", t.style.top = "0", t.addEventListener("recording:started", (e) => {
10
+ console.log("recording:started", e);
11
+ }), t.addEventListener("recording:stopped", (e) => {
12
+ console.log("recording:stopped", e);
13
+ }), t.addEventListener("recording:failed", (e) => {
14
+ console.log("recording:failed", e);
15
+ }), t.addEventListener("transcribing:started", (e) => {
16
+ console.log("transcribing:started", e);
17
+ }), t.addEventListener("transcribing:finished", (e) => {
18
+ console.log("transcribing:finished", e);
19
+ const d = e.detail;
20
+ r(o, d);
21
+ }), t.addEventListener("transcribing:failed", (e) => {
22
+ console.log("transcribing:failed", e);
23
+ }), n.appendChild(t);
24
+ }
25
+ }
26
+ function r(a, o) {
27
+ const n = a.selectionStart || 0, t = a.selectionEnd || 0;
28
+ a.value = a.value.substring(0, n) + o + a.value.substring(t);
29
+ }
30
+ document.addEventListener("DOMContentLoaded", () => {
31
+ i(), new MutationObserver(i).observe(document.body, {
32
+ childList: !0,
33
+ subtree: !0
34
+ });
35
+ });
package/dist/inject-inclusive.cjs.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";function s(){const i=document.querySelectorAll('textarea:not([data-dictate-button-off]):not([data-dictate-button-enabled]), input[type="text"]:not([data-dictate-button-off]):not([data-dictate-button-enabled])');for(const o of i){const n=document.createElement("div");n.style.position="relative",n.style.display="inline-block",n.style.width="auto",n.style.color="inherit",o.parentNode.insertBefore(n,o),o.setAttribute("data-dictate-button-enabled",""),n.appendChild(o),o.style.boxSizing="border-box";const t=document.createElement("dictate-button");t.size=24,t.style.position="absolute",t.style.right="0",t.style.top="0",t.addEventListener("recording:started",e=>{console.log("recording:started",e)}),t.addEventListener("recording:stopped",e=>{console.log("recording:stopped",e)}),t.addEventListener("recording:failed",e=>{console.log("recording:failed",e)}),t.addEventListener("transcribing:started",e=>{console.log("transcribing:started",e)}),t.addEventListener("transcribing:finished",e=>{console.log("transcribing:finished",e);const d=e.detail;r(o,d)}),t.addEventListener("transcribing:failed",e=>{console.log("transcribing:failed",e)}),n.appendChild(t)}}function r(i,o){const n=i.selectionStart||0,t=i.selectionEnd||0;i.value=i.value.substring(0,n)+o+i.value.substring(t)}document.addEventListener("DOMContentLoaded",()=>{s(),new MutationObserver(s).observe(document.body,{childList:!0,subtree:!0})});
package/dist/inject-inclusive.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {}
package/dist/inject-inclusive.es.js ADDED
@@ -0,0 +1,35 @@
1
+ function d() {
2
+ const i = document.querySelectorAll(
3
+ 'textarea:not([data-dictate-button-off]):not([data-dictate-button-enabled]), input[type="text"]:not([data-dictate-button-off]):not([data-dictate-button-enabled])'
4
+ );
5
+ for (const o of i) {
6
+ const n = document.createElement("div");
7
+ n.style.position = "relative", n.style.display = "inline-block", n.style.width = "auto", n.style.color = "inherit", o.parentNode.insertBefore(n, o), o.setAttribute("data-dictate-button-enabled", ""), n.appendChild(o), o.style.boxSizing = "border-box";
8
+ const t = document.createElement("dictate-button");
9
+ t.size = 24, t.style.position = "absolute", t.style.right = "0", t.style.top = "0", t.addEventListener("recording:started", (e) => {
10
+ console.log("recording:started", e);
11
+ }), t.addEventListener("recording:stopped", (e) => {
12
+ console.log("recording:stopped", e);
13
+ }), t.addEventListener("recording:failed", (e) => {
14
+ console.log("recording:failed", e);
15
+ }), t.addEventListener("transcribing:started", (e) => {
16
+ console.log("transcribing:started", e);
17
+ }), t.addEventListener("transcribing:finished", (e) => {
18
+ console.log("transcribing:finished", e);
19
+ const s = e.detail;
20
+ r(o, s);
21
+ }), t.addEventListener("transcribing:failed", (e) => {
22
+ console.log("transcribing:failed", e);
23
+ }), n.appendChild(t);
24
+ }
25
+ }
26
+ function r(i, o) {
27
+ const n = i.selectionStart || 0, t = i.selectionEnd || 0;
28
+ i.value = i.value.substring(0, n) + o + i.value.substring(t);
29
+ }
30
+ document.addEventListener("DOMContentLoaded", () => {
31
+ d(), new MutationObserver(d).observe(document.body, {
32
+ childList: !0,
33
+ subtree: !0
34
+ });
35
+ });
package/dist/inject.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=24;function s(){const a=document.querySelectorAll('textarea[data-dictate-button-target]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-target]:not([data-dictate-button-enabled])');for(const n of a){const e=document.createElement("div");e.style.position="relative",e.style.display="inline-block",e.style.width="auto",e.style.color="inherit",n.parentNode.insertBefore(e,n),n.setAttribute("data-dictate-button-enabled",""),e.appendChild(n),n.style.boxSizing="border-box";const t=document.createElement("dictate-button");t.size=i,t.style.position="absolute",t.style.right="0",t.style.top="0",t.addEventListener("started",o=>{console.log("started",o)}),t.addEventListener("transcribed",o=>{console.log("transcribed",o);const d=o.detail;r(n,d)}),t.addEventListener("stopped",o=>{console.log("stopped",o)}),t.addEventListener("error",o=>{console.log("error",o)}),e.appendChild(t)}}function r(a,n){const e=a.selectionStart||0,t=a.selectionEnd||0;a.value=a.value.substring(0,e)+n+a.value.substring(t)}document.addEventListener("DOMContentLoaded",()=>{s(),new MutationObserver(s).observe(document.body,{childList:!0,subtree:!0})});exports.injectDictateButton=s;
1
+ "use strict";require("./inject-exclusive.cjs.js");
package/dist/inject.es.js CHANGED
@@ -1,34 +1 @@
1
- function a() {
2
- const s = document.querySelectorAll(
3
- 'textarea[data-dictate-button-target]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-target]:not([data-dictate-button-enabled])'
4
- );
5
- for (const n of s) {
6
- const e = document.createElement("div");
7
- e.style.position = "relative", e.style.display = "inline-block", e.style.width = "auto", e.style.color = "inherit", n.parentNode.insertBefore(e, n), n.setAttribute("data-dictate-button-enabled", ""), e.appendChild(n), n.style.boxSizing = "border-box";
8
- const t = document.createElement("dictate-button");
9
- t.size = 24, t.style.position = "absolute", t.style.right = "0", t.style.top = "0", t.addEventListener("started", (o) => {
10
- console.log("started", o);
11
- }), t.addEventListener("transcribed", (o) => {
12
- console.log("transcribed", o);
13
- const d = o.detail;
14
- r(n, d);
15
- }), t.addEventListener("stopped", (o) => {
16
- console.log("stopped", o);
17
- }), t.addEventListener("error", (o) => {
18
- console.log("error", o);
19
- }), e.appendChild(t);
20
- }
21
- }
22
- function r(s, n) {
23
- const e = s.selectionStart || 0, t = s.selectionEnd || 0;
24
- s.value = s.value.substring(0, e) + n + s.value.substring(t);
25
- }
26
- document.addEventListener("DOMContentLoaded", () => {
27
- a(), new MutationObserver(a).observe(document.body, {
28
- childList: !0,
29
- subtree: !0
30
- });
31
- });
32
- export {
33
- a as injectDictateButton
34
- };
1
+ import "./inject-exclusive.es.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dictate-button",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Dictate Button (Web Component)",
5
5
  "keywords": [
6
6
  "custom-element",
@@ -29,6 +29,14 @@
29
29
  "./inject": {
30
30
  "import": "./dist/inject.es.js",
31
31
  "require": "./dist/inject.cjs.js"
32
+ },
33
+ "./inject-exclusive": {
34
+ "import": "./dist/inject-exclusive.es.js",
35
+ "require": "./dist/inject-exclusive.cjs.js"
36
+ },
37
+ "./inject-inclusive": {
38
+ "import": "./dist/inject-inclusive.es.js",
39
+ "require": "./dist/inject-inclusive.cjs.js"
32
40
  }
33
41
  },
34
42
  "dependencies": {
package/src/inject-exclusive.js ADDED
@@ -0,0 +1,76 @@
1
+ const BUTTONS_SIZE = 24 // px
2
+ const WATCH_DOM_CHANGES = true
3
+
4
+ function injectDictateButton() {
5
+ const textFields = document.querySelectorAll(
6
+ 'textarea[data-dictate-button-on]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-on]:not([data-dictate-button-enabled]), textarea[data-dictate-button-target]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-target]:not([data-dictate-button-enabled])'
7
+ )
8
+
9
+ for (const textField of textFields) {
10
+ // Add a wrapper div with relative positioning.
11
+ const container = document.createElement('div')
12
+ container.style.position = 'relative'
13
+ container.style.display = 'inline-block'
14
+ container.style.width = 'auto'
15
+ container.style.color = 'inherit'
16
+ textField.parentNode.insertBefore(container, textField)
17
+
18
+ textField.setAttribute('data-dictate-button-enabled', '')
19
+
20
+ container.appendChild(textField)
21
+
22
+ // Ensure textarea fills container
23
+ textField.style.boxSizing = 'border-box'
24
+ // textarea.style.paddingRight = `${BUTTONS_SIZE + 2 * 2 + 6}px`
25
+
26
+ // Add the dictate-button component.
27
+ const dictateBtn = document.createElement('dictate-button')
28
+ dictateBtn.size = BUTTONS_SIZE
29
+ dictateBtn.style.position = 'absolute'
30
+ dictateBtn.style.right = '0'
31
+ dictateBtn.style.top = '0'
32
+
33
+ // Add event listeners for the dictate-button component.
34
+ dictateBtn.addEventListener('recording:started', (e) => {
35
+ console.log('recording:started', e)
36
+ })
37
+ dictateBtn.addEventListener('recording:stopped', (e) => {
38
+ console.log('recording:stopped', e)
39
+ })
40
+ dictateBtn.addEventListener('recording:failed', (e) => {
41
+ console.log('recording:failed', e)
42
+ })
43
+
44
+ dictateBtn.addEventListener('transcribing:started', (e) => {
45
+ console.log('transcribing:started', e)
46
+ })
47
+ dictateBtn.addEventListener('transcribing:finished', (e) => {
48
+ console.log('transcribing:finished', e)
49
+ const customEvent = e
50
+ const text = customEvent.detail
51
+ receiveText(textField, text)
52
+ })
53
+ dictateBtn.addEventListener('transcribing:failed', (e) => {
54
+ console.log('transcribing:failed', e)
55
+ })
56
+
57
+ container.appendChild(dictateBtn)
58
+ }
59
+ }
60
+
61
+ function receiveText(textField, text) {
62
+ const start = textField.selectionStart || 0
63
+ const end = textField.selectionEnd || 0
64
+ textField.value =
65
+ textField.value.substring(0, start) + text + textField.value.substring(end)
66
+ }
67
+
68
+ document.addEventListener('DOMContentLoaded', () => {
69
+ injectDictateButton()
70
+ if (WATCH_DOM_CHANGES) {
71
+ new MutationObserver(injectDictateButton).observe(document.body, {
72
+ childList: true,
73
+ subtree: true,
74
+ })
75
+ }
76
+ })
package/src/inject-inclusive.js ADDED
@@ -0,0 +1,76 @@
1
+ const BUTTONS_SIZE = 24 // px
2
+ const WATCH_DOM_CHANGES = true
3
+
4
+ function injectDictateButton() {
5
+ const textFields = document.querySelectorAll(
6
+ 'textarea:not([data-dictate-button-off]):not([data-dictate-button-enabled]), input[type="text"]:not([data-dictate-button-off]):not([data-dictate-button-enabled])'
7
+ )
8
+
9
+ for (const textField of textFields) {
10
+ // Add a wrapper div with relative positioning.
11
+ const container = document.createElement('div')
12
+ container.style.position = 'relative'
13
+ container.style.display = 'inline-block'
14
+ container.style.width = 'auto'
15
+ container.style.color = 'inherit'
16
+ textField.parentNode.insertBefore(container, textField)
17
+
18
+ textField.setAttribute('data-dictate-button-enabled', '')
19
+
20
+ container.appendChild(textField)
21
+
22
+ // Ensure textarea fills container
23
+ textField.style.boxSizing = 'border-box'
24
+ // textarea.style.paddingRight = `${BUTTONS_SIZE + 2 * 2 + 6}px`
25
+
26
+ // Add the dictate-button component.
27
+ const dictateBtn = document.createElement('dictate-button')
28
+ dictateBtn.size = BUTTONS_SIZE
29
+ dictateBtn.style.position = 'absolute'
30
+ dictateBtn.style.right = '0'
31
+ dictateBtn.style.top = '0'
32
+
33
+ // Add event listeners for the dictate-button component.
34
+ dictateBtn.addEventListener('recording:started', (e) => {
35
+ console.log('recording:started', e)
36
+ })
37
+ dictateBtn.addEventListener('recording:stopped', (e) => {
38
+ console.log('recording:stopped', e)
39
+ })
40
+ dictateBtn.addEventListener('recording:failed', (e) => {
41
+ console.log('recording:failed', e)
42
+ })
43
+
44
+ dictateBtn.addEventListener('transcribing:started', (e) => {
45
+ console.log('transcribing:started', e)
46
+ })
47
+ dictateBtn.addEventListener('transcribing:finished', (e) => {
48
+ console.log('transcribing:finished', e)
49
+ const customEvent = e
50
+ const text = customEvent.detail
51
+ receiveText(textField, text)
52
+ })
53
+ dictateBtn.addEventListener('transcribing:failed', (e) => {
54
+ console.log('transcribing:failed', e)
55
+ })
56
+
57
+ container.appendChild(dictateBtn)
58
+ }
59
+ }
60
+
61
+ function receiveText(textField, text) {
62
+ const start = textField.selectionStart || 0
63
+ const end = textField.selectionEnd || 0
64
+ textField.value =
65
+ textField.value.substring(0, start) + text + textField.value.substring(end)
66
+ }
67
+
68
+ document.addEventListener('DOMContentLoaded', () => {
69
+ injectDictateButton()
70
+ if (WATCH_DOM_CHANGES) {
71
+ new MutationObserver(injectDictateButton).observe(document.body, {
72
+ childList: true,
73
+ subtree: true,
74
+ })
75
+ }
76
+ })
package/src/inject.js CHANGED
@@ -1,77 +1,2 @@
1
- const BUTTONS_SIZE = 24 // px
2
- const WATCH_DOM_CHANGES = true
3
-
4
- export function injectDictateButton() {
5
- const textFields = document.querySelectorAll(
6
- 'textarea[data-dictate-button-target]:not([data-dictate-button-enabled]), input[type="text"][data-dictate-button-target]:not([data-dictate-button-enabled])'
7
- )
8
-
9
- for (const textField of textFields) {
10
- // Add a wrapper div with relative positioning.
11
- const container = document.createElement('div')
12
- container.style.position = 'relative'
13
- container.style.display = 'inline-block'
14
- container.style.width = 'auto'
15
- container.style.color = 'inherit'
16
- textField.parentNode.insertBefore(container, textField)
17
-
18
- textField.setAttribute('data-dictate-button-enabled', '')
19
-
20
- container.appendChild(textField)
21
-
22
- // Ensure textarea fills container
23
- textField.style.boxSizing = 'border-box'
24
- // textarea.style.paddingRight = `${BUTTONS_SIZE + 2 * 2 + 6}px`
25
-
26
- // Add the dictate-button component.
27
- const dictateBtn = document.createElement('dictate-button')
28
- dictateBtn.size = BUTTONS_SIZE
29
- dictateBtn.style.position = 'absolute'
30
- dictateBtn.style.right = '0'
31
- dictateBtn.style.top = '0'
32
-
33
- // Add event listeners for the dictate-button component.
34
- dictateBtn.addEventListener('recording:started', (e) => {
35
- console.log('recording:started', e)
36
- })
37
- dictateBtn.addEventListener('recording:stopped', (e) => {
38
- console.log('recording:stopped', e)
39
- })
40
- dictateBtn.addEventListener('recording:failed', (e) => {
41
- console.log('recording:failed', e)
42
- })
43
-
44
- dictateBtn.addEventListener('transcribing:started', (e) => {
45
- console.log('transcribing:started', e)
46
- })
47
-
48
- dictateBtn.addEventListener('transcribing:finished', (e) => {
49
- console.log('transcribing:finished', e)
50
- const customEvent = e
51
- const text = customEvent.detail
52
- receiveText(textField, text)
53
- })
54
- dictateBtn.addEventListener('transcribing:failed', (e) => {
55
- console.log('transcribing:failed', e)
56
- })
57
-
58
- container.appendChild(dictateBtn)
59
- }
60
- }
61
-
62
- function receiveText(textField, text) {
63
- const start = textField.selectionStart || 0
64
- const end = textField.selectionEnd || 0
65
- textField.value =
66
- textField.value.substring(0, start) + text + textField.value.substring(end)
67
- }
68
-
69
- document.addEventListener('DOMContentLoaded', () => {
70
- injectDictateButton()
71
- if (WATCH_DOM_CHANGES) {
72
- new MutationObserver(injectDictateButton).observe(document.body, {
73
- childList: true,
74
- subtree: true,
75
- })
76
- }
77
- })
1
+ // Enhance only specific fields.
2
+ import './inject-exclusive'
package/vite.config.ts CHANGED
@@ -27,6 +27,8 @@ export default defineConfig({
27
27
  entry: {
28
28
  'dictate-button': 'src/dictate-button.tsx',
29
29
  inject: 'src/inject.js',
30
+ 'inject-exclusive': 'src/inject-exclusive.js',
31
+ 'inject-inclusive': 'src/inject-inclusive.js',
30
32
  },
31
33
  formats: ['es', 'cjs'],
32
34
  fileName: (format, entryName) => `${entryName}.${format}.js`,