fix: pasting over a selection behaviour

Delete all the markups whose text is completely within the current selection

Author: Muhameti-centralsoft

src/clipboard.js

@@ -29,7 +29,11 @@ export function paste (element, cursor, clipboardContent) {
   const document = element.ownerDocument
   element.setAttribute(config.pastingAttribute, true)
 
-  if (cursor.isSelection) cursor = cursor.deleteContent()
+  if (cursor.isSelection) {
+    cursor = cursor.deleteExactSurroundingMarkups()
+      .deleteContainedMarkupTags()
+      .deleteContent()
+  }
 
   // Create a placeholder to help parse HTML
   const pasteHolder = document.createElement('div')

src/content.js

@@ -244,6 +244,12 @@ export function getInnerTags (range, filterFunc) {
   return range.getNodes([nodeType.elementNode], filterFunc)
 }
 
+// Get all tags whose text is completely within the current selection.
+export function getContainedTags (range, filterFunc) {
+  return range.getNodes([nodeType.elementNode], filterFunc)
+    .filter(elem => range.containsNodeText(elem))
+}
+
 // Transform an array of elements into an array
 // of tagnames in uppercase
 //

src/cursor.js

@@ -69,6 +69,11 @@ export default class Cursor {
     return content.getInnerTags(this.range, filterFunc)
   }
 
+  // Get all tags whose text is completely within the current selection.
+  getContainedTags (filterFunc) {
+    return content.getContainedTags(this.range, filterFunc)
+  }
+
   // Get all tags that surround the current selection.
   getAncestorTags (filterFunc) {
     return content.getAncestorTags(this.host, this.range, filterFunc)

src/selection.js

@@ -246,24 +246,37 @@ export default class Selection extends Cursor {
   }
 
   // Delete the farest ancestor that is an exact selection
+  //
+  // @return Selection instance
   deleteExactSurroundingMarkups () {
-    const markupTags = this.getAncestorTags(
+    const ancestorMarkupTags = this.getAncestorTags(
       (elem) => ['STRONG', 'EM'].includes(elem.nodeName)
     ).reverse()
-    for (const markupTag of markupTags) {
-      if (this.isExactSelection(markupTag)) {
-        markupTag.remove()
+    for (const ancestorMarkupTag of ancestorMarkupTags) {
+      if (this.isExactSelection(ancestorMarkupTag)) {
+        ancestorMarkupTag.remove()
         break
       }
     }
+    return new Selection(this.host, this.range)
+  }
+
+  // Delete all the markups whose text is completely within the current selection.
+  //
+  // @return Selection instance
+  deleteContainedMarkupTags () {
+    const containedMarkupTags = this.getContainedTags(
+      (elem) => ['STRONG', 'EM'].includes(elem.nodeName)
+    )
+    containedMarkupTags.forEach(containedMarkupTag => containedMarkupTag.remove())
+    return new Selection(this.host, this.range)
   }
 
   // Delete the contents inside the range and exact surrounding markups.
   // After that the selection will be a cursor.
   //
   // @return Cursor instance
   deleteContent () {
-    this.deleteExactSurroundingMarkups()
     this.range.deleteContents()
     return new Cursor(this.host, this.range)
   }