Giter Club home page Giter Club logo

insert-text-at-cursor's Introduction

Insert Text at Cursor

This library provides a consistent (and fast!) way to insert some text at the cursor position into a textrea or a text input field. If the field contains a selection, the selected text will be replaced with a given one.

Quick Start

Add it to your project

npm install --save insert-text-at-cursor

Import using ES Modules:

import insertTextAtCursor from 'insert-text-at-cursor';

Or as a CommonJS:

const insertTextAtCursor = require('insert-text-at-cursor');
// Find an element you want on the page
const el = document.getElementById('my-textarea');
insertTextAtCursor(el, 'foobar');

Browser Support

The library has been tested in:

  • Latest Edge, Firefox, Chrome, Opera, Safari (Mac)
  • iOS 11 Safari
  • IE 8-11

Caveats

Due to the nature of the APIs used, the library will always focus the target field and set the cursor after the inserted text.

Motivation

All previously existing solution that I could find rely on getting full value of the the textarea, then slicing in necessary text, resetting new value and then restoring selection to the right position.

While this works quite well for small size of the text, if you have a few pages of text, the delay is very noticeable, especially on mobile devices and older browsers.

To mitigate that the library uses several different strategies by doing feature detection of several non-standard features to find a fast path. If none of the fast options are available, it falls back to true and tested method described above.

License

The MIT License

Copyright (c) 2018 Dmitriy Kubyshkin

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

insert-text-at-cursor's People

Contributors

alex-ju avatar andrerpena avatar dependabot[bot] avatar grassator avatar stof avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

insert-text-at-cursor's Issues

Support draft-js editor

Greetings,

I've been using your package for inserting text into default textarea/input components and it works great.

Unfortunately, it doesn't work well at sites that use the draft-js editor (e.g. reddit or facebook).

Here is a workaround that works for draft-js.

Is there a chance to support this editor?

This is the minimum valuable code that inserts a text at cursor with draft-js:

function addTextToDraftJs(element, text) {
    var textEvent = document.createEvent('TextEvent');
    textEvent.initTextEvent ('textInput', true, true, null, text);                    
    element.dispatchEvent(textEvent);
}

addTextToDraftJs(document.activeElement, 'it works');

Thx.

it doesn't work at vue。

main.js
import insertTextAtCursor from 'insert-text-at-cursor'; Vue.use(insertTextAtCursor);
Chrome Console:
index.js?585e:26 Uncaught TypeError: input.focus is not a function
Thinks

minify problem

that log from netlify. i can't deploy the web site

7:20:29 AM: Failed to minify the code from this file:
7:20:29 AM: ./node_modules/insert-text-at-cursor/index.js:1

Exclude index.js from published library

Hello,
I am using react-mde library, which has dependency to this library in the latest version.
After updating react-mde, webpack throws error during build

ERROR in assets/js/bundle.js?v=8c4ec7c34d426ef93de7 from UglifyJs
Unexpected token: name (browserSupportsTextareaTextNodes)

This is caused by webpack prioritizing module field over main field by default and UglifyJs can't read ES6 syntax that is in index.js.
Would it be possible to add .npmignore file with index.js in it so webpack uses the correct path?
Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.