Having trouble adding hyperlinks in the <text-angular> using ng-change. Whenever a user pastes a URL, the cursor automatically jumps to the beginning

<text-angular name="myEditor" class="deal-notes" ta-
toolbar-class="btn-toolbar pull-right" ng-model-options="{ debounce: 500}" 
ng-change="updateDeal('deal.notes');" ng-blur="makeLinks()" ta-toolbar-
group-class="btn-group" ta-toolbar="[['bold','italics', 'insertLink']]" ng-
model="deal.notes">

My goal is to add hyperlinks to the content using ng-change, but whenever a user pastes a URL, the cursor jumps to the beginning.

<script> 
    function makeLinks(){
        var linkedText = Autolinker.link($scope.deal.notes, {stripPrefix: false});
        $scope.deal.notes = linkedText;                                                                                 
        updateDeal('deal.notes');
    }
</script>
javascriptangularjs

Answer №1

To ensure proper functionality, it is crucial to save the caret's position before any changes are made to the html/text content. Once modifications have been applied, you can then reposition the caret to its original location or adjust it based on the alterations.

Here is an updated version of the makeLinks() function:

function makeLinks() 
    {
      var caretPosition = editorElement.prop("selectionStart");
      var linkedContent = Autolinker.link($scope.deal.notes, {stripPrefix: false});
      $scope.deal.notes = linkedContent;                                                                                 
      updateDeal('deal.notes');

      // Set the cursor back to its correct position
      editorElement.setSelectionRange(caretPosition, caretPosition);
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering exception: Issue occurred post Node version upgrade, indicating "write after end" error

Initially, my Node.js application was operating smoothly under Node v10.29. Unfortunately, when I upgraded to "node" version . When the Node version was updated to 12.0, an error stating Caught exception: Error: write after end started occurring: Caught ...

javascriptnode.jsexpress

`Weaving mesh into place with three.js`

I'm struggling to grasp how to position my cubes on the canvas. I can't quite figure out how positioning actually works. I'm trying to find a way to determine if my mesh reaches the limits of the canvas. But what exactly is the unit of posit ...

javascripthtmlcanvasthree.js

Tips on ensuring that the effect only impacts the modified component

I'm facing an issue where two input components show changes simultaneously. How can I display only the changed input component? input.tsx export const Input: React.FC<InputProps> = ({ type, placeholder, classNameProp, value, onChange, forwardRe ...

javascriptreactjstypescript

Establishing a minimum width for the value of zero in AmCharts column series by customizing the bullet labels

Here's an interesting example where I have arranged column series with bullet labels. However, you may notice that there are some 0 values present as well. My goal is to establish a minimum width for the series so that even if the value is small or 0, ...

javascriptchartsamchartsamcharts4

Ways to deactivate remaining buttons until a function call finishes after selecting one in a react render() function?

In order to prevent the overlap of results when multiple buttons are clicked simultaneously, I need to disable all toggle buttons until one function call is complete, including the reset button. Additionally, I'm looking for a way to display my functi ...

javascriptreactjs

Troubleshooting the Google OAuth 2.0 SAMEORIGIN Issue

Trying to bypass the SAMEORIGIN error while using Google's JavaScript API is a timeless challenge. Here is an example of what I have tried: let clientId = 'CLIENT_ID'; let apiKey = 'API_KEY'; let scopes = 'https://www.google ...

javascriptoauthgoogle-api

What is the process for obtaining the cypress interception fixture twice but in two distinct formats?

Hi there, I'm new to Cypress and facing a challenge that I hope you can help me with. In my test file, I have the following code: cy.SetupClassificationsStubFixture(1); This code refers to a custom command that I've created: Cypress.Commands.ad ...

javascriptarrayscypressfixturesintercept

Tables that respond to changes in screen size, allowing nested table cells to inherit widths

I am currently working on a responsive table with unique content in each row and a concertina feature for expanding rows. When the concertina is activated, it adds another row to the table below the current row, using a td element with a colspan attribute ...

javascriptjquerycsshtml-tableresponsive

Calling a JavaScript Class

Attempting to create a Q20-style game, encountering an issue when trying to call a class in JavaScript. Below is the code snippet causing trouble: var TreeQuestions = require('./Tree.js'); var node = { value: null, id: null, ifAnswe ...

javascriptnode.jsalgorithm

Troubleshooting problem with ng-options in AngularJS

Exploring the realm of angular js and attempting to incorporate options into a select using angular. However, encountering an issue: Check out the code snippet below /* * To change this license header, choose License Headers in Project Properties. * ...

angularjshtml

Encountering the error "TypeError: Router.use() is expecting a middleware function but received undefined" when attempting to import a router from another file

Trying to configure a router for user paths and exporting it for use in index.js is causing an error. The following error message is displayed: C:\Users\yugi\OneDrive\Documents\codes\NodeJs\API_nodejs\node_modules&bs ...

javascriptnode.jsexpressbackend

Typescript check for type with Jest

Assume there is an interface defined as follows: export interface CMSData { id: number; url: string; htmlTag: string; importJSComponent: string; componentData: ComponentAttribute[]; } There is a method that returns an array of this obj ...

javascripttypescriptunit-testingjestjs

Receiving Ajax Callback: extracting messages from PHP using JSON, then displaying them in a DIV element using JavaScript

As a complete beginner, I find JavaScript to be quite challenging and struggle with simple tasks. I have a PHP script that retrieves data from a website using JS. This PHP script updates the database and returns a success message using the following code: ...

javascriptjsonajax

(Express) Passing data between functions within express.Router().get

What is the best way to transfer a value from one function to another within a router.get method? router.get('/someurl', (req, res, next) => { const token = req.headers.authorization.split(' ')[1] //jwtToken const jwt = jwt.verify( ...

javascriptnode.jsexpressbackendexpress-router

Looping through elements using jQuery in JavaScript

Is there a strange phenomenon happening with my variable in the HTML? I set it to "0", but it displays as "10" on the page. Despite using jQuery and JavaScript, the number stays static at "10" even after refreshing the page. I'm attempting to make th ...

javascriptjqueryhtmlfor-loop

Remove chosen tags from the options list in Material UI Autocomplete Multiple

When utilizing the Material UI Autocomplete for multiple values, the selected input is shown in the options list with a blue background color. Is there a way to configure the autocomplete to exclude already selected values from appearing in the options li ...

javascriptreactjsmaterial-uimaterial-design

Interactive Notification System with MySQL, AJAX, and PHP

Seeking assistance for code conversion from async ajax to sync ajax. The current code is causing system lag after 20 minutes of inactivity. Likely issue resides within the code snippet provided below. function addmsg20(type, msg, data) { $('# ...

javascriptphpajax

Transmit JSON data using Autobahn Python

I am attempting to use sendMessage to send the json content from a URL to a client. def broadcast(self): response = urllib2.urlopen('http://example.com/json?as_text=1') data = json.load(response) for c in self.clients: c.sendMessage( ...

javascriptpythonjsontwistedautobahn

When incorporating an array into a span tag, only the final string is being shown by the loop

I need assistance with changing the content of a span tag every 1.5 seconds, but currently it only displays the final word in the 'list' array. Below is my JavaScript code: var list = [ "websites", "user interfaces" ]; setInterval(fun ...

javascripthtmlarraysloopsfor-loop

What is the best way to trigger an event function again once a specific condition has been satisfied?

I'm currently working on a project where I need a sidebar to scroll at a slower rate until it reaches a specific point, and then stop scrolling once that point is reached. Below is the jQuery code I've been using: $(window).on("scroll", function ...

javascriptjquerycss