text-field-edit [![][badge-gzip]](#link-npm)

[badge-gzip]: https://img.shields.io/bundlephobia/minzip/text-field-edit.svg?label=gzipped
[link-npm]: https://www.npmjs.com/package/text-field-edit

> Insert text in a </code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><input></code> and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">contenteditable</code> (including Undo support)</p><p class="my-3">You should use this instead of setting the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">field.value</code> directly because:</p><p class="my-3">- it doesn't break the undo history<br />- it fires an <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">input</code> event (with <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">event.inputType === 'insertText'</code>)<br />- it's the most efficient way of adding/replacing selected text in a field<br />- it's cross-browser (modern browsers)</p><p class="my-3">It uses <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">document.execCommand('insertText')</code> under the hood and it automatically focuses/blurs the field you pass.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Install</h2></p><p class="my-3">You can download the <a href="https://bundle.fregante.com/?pkg=text-field-edit" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">standalone bundle</a></p><p class="my-3">Or use <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">npm</code>:</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />npm install text-field-edit<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />import textFieldEdit from 'text-field-edit';</p><p class="my-3">// Alternatively only import the specific methods<br />import {<br /> insertTextIntoField,<br /> setFieldText,<br /> getFieldSelection,<br /> wrapFieldSelection,<br /> replaceFieldText,<br />} from 'text-field-edit';<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Usage</h2></p><p class="my-3">Insert text at the cursor, replacing any possible selected text, acting like a </code>paste<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> would:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const input = document.querySelector('input');<br />const button = document.querySelector('.js-add-signature');<br />button.addEventListener(event => {<br /> textFieldEdit.insert(input, 'Made by 🐝 with pollen.');<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">This will act like </code>field.value = 'New value'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> but with <strong>undo</strong> support and by firing the </code>input<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const textarea = document.querySelector('textarea');<br />const resetButton = document.querySelector('.js-markdown-reset-field');<br />resetButton.addEventListener(event => {<br /> textFieldEdit.set(textarea, 'New value');<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Inserts </code>text<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> at the cursor’s position, replacing any selection.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const field = document.querySelector('input[type="text"]');<br />textFieldEdit.insert(field, '🥳');<br />// Changes field's value from 'Party|' to 'Party🥳|' (where | is the cursor)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### field</p><p class="my-3">Type: </code>HTMLTextAreaElement | HTMLInputElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or any </code>contenteditable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element</p><p class="my-3">#### text</p><p class="my-3">Type: </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The text to insert at the cursor's position.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Replaces the entire content, equivalent to </code>field.value = 'New text!'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> but with <strong>undo</strong> support and by firing the </code>input<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const textarea = document.querySelector('textarea');<br />textFieldEdit.set(textarea, 'New text!');<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### field</p><p class="my-3">Type: </code>HTMLTextAreaElement | HTMLInputElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or any </code>contenteditable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element</p><p class="my-3">#### text</p><p class="my-3">Type: </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The new value that the field will have.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Finds and replaces strings and regular expressions in the field’s value, like </code>field.value = field.value.replace()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> but leaves the last replacement selected like a text editor would.</p><p class="my-3">Similar to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">String#replace</a></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const textarea = document.querySelector('textarea');<br />textarea.value = 'Hello world';<br />textFieldEdit.replace(textarea, 'Hello', 'Ciao');<br />// Changes field's value from 'Hello world' to '|Ciao| world' (where | marks the selected text)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### field</p><p class="my-3">Type: </code>HTMLTextAreaElement | HTMLInputElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (not available on </code>contenteditable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3">#### searchValue</p><p class="my-3">Type: </code>string | RegExp<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The text to replace in the field’s value.</p><p class="my-3">#### replacement</p><p class="my-3">Type: </code>string | function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The text that will replace </code>searchValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or a callback function that matches <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">the signature in </code>String#replace<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>.</p><p class="my-3"><strong>Note</strong>: replacement patterns (</code>replace(field, /hello (world)/, 'ciao $1')<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) aren't supported.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Adds the </code>wrappingText<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> before and after field’s selection (or cursor). If </code>endWrappingText<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is provided, it will be used instead of </code>wrappingText<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on the right.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const field = document.querySelector('textarea');<br />textFieldEdit.wrapSelection(field, '**');<br />// Changes the field's value from 'I |love| gudeg' to 'I <strong>|love|</strong> gudeg' (where | marks the selected text)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const field = document.querySelector('textarea');<br />textFieldEdit.wrapSelection(field, '(', ')');<br />// Changes the field's value from '|almost| cool' to '(|almost|) cool' (where | marks the selected text)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### field</p><p class="my-3">Type: </code>HTMLTextAreaElement | HTMLInputElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or any </code>contenteditable<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> elements</p><p class="my-3">#### wrappingText</p><p class="my-3">Type: </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The string to prepend to the selection.</p><p class="my-3">#### endWrappingText</p><p class="my-3">Type: </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The string to append to the selection. If not provided, </code>wrappingText<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will be used.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Utility method to get the selected text in a field or an empty string if nothing is selected.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const field = document.querySelector('textarea');<br />textFieldEdit.getSelection(field);<br />// => 'almost'<br />// If the field's value is '|almost| cool' (where | marks the selected text)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### field</p><p class="my-3">Type: </code>HTMLTextAreaElement | HTMLInputElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Related</h1></p><p class="my-3">- <a href="https://github.com/fregante/indent-textarea" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">indent-textarea</a> - Add editor-like tab-to-indent functionality to </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, in a few bytes. Uses this module.<br />- <a href="https://github.com/fregante/fit-textarea" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">fit-textarea</a> - Automatically expand a </code><textarea>` to fit its content, in a few bytes.<br />- <a href="https://github.com/refined-github/refined-github" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Refined GitHub</a> - Uses this module.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:4"></template><template id="P:5"></template></div></div></div><script>self.__next_f.push([1,"2d:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2e:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^17.0.0\"}]\n2f:[\"$\",\"$L5\",\"esmify\",{\"href\":\"/package/esmify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"esmify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.1.1\"}]]}]\n30:[\"$\",\"$L5\",\"npm-run-all\",{\"href\":\"/package/npm-run-all\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"npm-run-all\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.1.5\"}]]}]\n31:[\"$\",\"$L5\",\"tape\",{\"href\":\"/package/tape\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tape\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.7.5\"}]]}]\n32:[\"$\",\"$L5\",\"tape-run\",{\"href\":\"/package/tape-run\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tape-run\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^11.0.0\"}]]}]\n33:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity gro"])</script><script>self.__next_f.push([1,"up-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.3.3\"}]]}]\n34:[\"$\",\"$L5\",\"xo\",{\"href\":\"/package/xo\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"xo\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.57.0\"}]]}]\n"])</script><div hidden id="S:3"><div class="rounded-lg border p-3"><h4 class="mb-2 text-sm font-medium">Dist Tags</h4><div class="space-y-1"><div class="flex justify-between text-sm"><span class="text-muted-foreground">latest</span><a class="font-mono text-xs hover:underline" href="/package/text-field-edit/v/4.1.1">4.1.1</a></div><div class="flex justify-between text-sm"><span class="text-muted-foreground">next</span><a class="font-mono text-xs hover:underline" href="/package/text-field-edit/v/3.0.0-0">3.0.0-0</a></div></div></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:5","P:5")</script><script>$RC("B:1","S:1")</script></body></html>