feat(clipboard): Copy&Paste keeps links relative

Author: mokimo

spec/clipboard.spec.js

@@ -1,4 +1,5 @@
-import { parseContent } from '../src/clipboard'
+import { parseContent, updateConfig } from '../src/clipboard'
+import * as config from '../src/config'
 
 describe('Clipboard', () => {
   describe('parseContent()', () => {
@@ -142,5 +143,12 @@ describe('Clipboard', () => {
 
       expect(parseContent(div)[0]).toEqual('bar')
     })
+
+    it('keeps internal links of a anchorTag with an href attribute', () => {
+      expect(extractSingleBlock('<a href="http://localhost:9876/test123">a</a>')).toEqual('<a href="http://localhost:9876/test123">a</a>')
+      config.pastedHtmlRules.keepInternalRelativeLinks = true
+      updateConfig(config)
+      expect(extractSingleBlock('<a href="http://localhost:9876/test123">a</a>')).toEqual('<a href="/test123">a</a>')
+    })
   })
 })

src/clipboard.js

@@ -8,6 +8,7 @@ let allowedElements, requiredAttributes, transformElements, blockLevelElements
 let splitIntoBlocks, blacklistedElements
 let whitespaceOnly = /^\s*$/
 let blockPlaceholder = '<!-- BLOCK -->'
+let keepInternalRelativeLinks
 
 updateConfig(config)
 export function updateConfig (config) {
@@ -16,6 +17,7 @@ export function updateConfig (config) {
   requiredAttributes = rules.requiredAttributes || {}
   transformElements = rules.transformElements || {}
   blacklistedElements = rules.blacklistedElements || []
+  keepInternalRelativeLinks = rules.keepInternalRelativeLinks || false
 
   blockLevelElements = {}
   rules.blockLevelElements.forEach((name) => { blockLevelElements[name] = true })
@@ -41,7 +43,6 @@ export function paste (element, cursor, callback) {
     const blocks = parseContent(pasteHolder)
     $(pasteHolder).remove()
     element.removeAttribute(config.pastingAttribute)
-
     cursor.restore()
     callback(blocks, cursor)
   }, 0)
@@ -68,6 +69,8 @@ export function injectPasteholder (document) {
  * - Parse pasted content
  * - Split it up into blocks
  * - clean and normalize every block
+ * - optionally strip the host location an anchorTag-href
+ *   www.livindocs.io/internalLink -> /internalLink
  *
  * @param {DOM node} A container where the pasted content is located.
  * @returns {Array of Strings} An array of cleaned innerHTML like strings.
@@ -87,14 +90,19 @@ export function filterHtmlElements (elem) {
       return ''
     }
 
+    // Keep internal relative links relative (on paste).
+    if (keepInternalRelativeLinks && child.nodeName === 'A' && child.href) {
+      const stripInternalHost = child.href.replace(window.location.origin, '')
+      child.setAttribute('href', stripInternalHost)
+    }
+
     if (child.nodeType === nodeType.elementNode) {
       const childContent = filterHtmlElements(child)
       return content + conditionalNodeWrap(child, childContent)
     }
 
     // Escape HTML characters <, > and &
     if (child.nodeType === nodeType.textNode) return content + string.escapeHtml(child.nodeValue)
-
     return content
   }, '')
 }

src/config.js

@@ -70,5 +70,7 @@ export const pastedHtmlRules = {
 
   // A list of elements that will get completly removed when pasted. Their tags
   // and content (text content and child elements) will get removed.
-  blacklistedElements: ['style', 'script']
+  blacklistedElements: ['style', 'script'],
+
+  keepInternalRelativeLinks: false
 }