textAngluar custom onPaste event

Question

im using textAngular editor, and im trying to intercept and replace content on paste event.

The reason I do this is because textAngular doesn't distinguish type of the ordred list when copying text from MS word (type="a",type"="1" etc.)

I tried build-in function ta-paste, but since this fucntion doest have event, i cant get plain text from clipboard, so insted i created custom directive and implemented onPaste method myself.

The problem is, this custom onPaste() doesnt prevents pasting the orginigal text from clipborad, insted it will paste the orginigal text from clipborad + my plain text.

const handlePaste = ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      $timeout(function() {
        // Find the inner div generated by textAngular
        const taEditor = element[0].querySelector('.ta-bind');
        const taEditorId = taEditor.getAttribute('id');
        console.log(taEditorId)

        if (!taEditor) {
          return;
        }

        // Bind the paste event to the TextAngular editor
        taEditor.addEventListener('paste', onPaste);

        // Clean up the event listener when the directive is destroyed
        scope.$on('$destroy', function() {
          taEditor.removeEventListener('paste', onPaste);
        });

        function onPaste(e) {
          console.log("start");
          e.preventDefault();

          const clipboardData = e.clipboardData || window.clipboardData;
          var pastedData = clipboardData.getData('Text');

          // Process and handle text...
          function processText(text) {
            // Modify the text as needed
            let modifiedText = text.replace(/\n/g, '').replace(/\r/g, '<br>');
            return modifiedText;
          }

          let modifiedText = processText(pastedData);

          // Insert the modified plain text content into the editor
          const selection = window.getSelection();
          const range = selection.getRangeAt(0);
          const tempDiv = document.createElement('div');
          tempDiv.innerHTML = modifiedText;

          range.deleteContents(); // Clear the current selection (if any)

          const fragment = document.createDocumentFragment();
          let child;
          while ((child = tempDiv.firstChild)) {
            fragment.appendChild(child);
          }
          range.insertNode(fragment);
          if (fragment.lastChild) {
            range.setStartAfter(fragment.lastChild);
          }
          selection.removeAllRanges();
          selection.addRange(range);

          // Update the ngModel of the editor
          scope.$apply(function () {
            ngModelCtrl.$setViewValue(taEditor.innerHTML);
          });

          console.log("end");
        }
      });
    }
  };
}];

let checkAdjustmentCMModule = angular.module('checkAdjustmentCM', [
  uiRouter,
  productSearchModal.name,
  require('textangular')
])
  .component('checkAdjustmentCM', checkAdjustmentCMComponent)
  .directive('handlePaste', handlePaste);

export default checkAdjustmentCMModule;