layers-design-system 2.0.10 → 2.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "layers-design-system",
   "main": "src/main.js",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "scripts": {
     "start": "vue-cli-service serve ./src/main-docs.js",
     "build": "vue-cli-service build --target lib ./src/main.js",
@@ -26,6 +26,7 @@
     "@tiptap/extension-text": "2.0.0-beta.13",
     "@tiptap/extension-underline": "2.0.0-beta.16",
     "@tiptap/vue-2": "2.0.0-beta.60",
+    "autolinker": "^4.0.0",
     "currency.js": "1.2.2",
     "dayjs": "^1.11.7",
     "dompurify": "2.3.3",
@@ -33,7 +34,6 @@
     "layers-utils": "1.0.4",
     "mustache": "4.2.0",
     "tiptap": "1.32.2",
-    "url-regex-safe": "2.0.2",
     "vant": "2.12.30",
     "vue": "2.6.14",
     "vue-router": "3.5.2",
@@ -41,7 +41,6 @@
     "vuetify": "2.5.10"
   },
   "devDependencies": {
-    "sass-loader": "7.3.1",
     "@vue/cli-plugin-babel": "4.5.14",
     "@vue/cli-plugin-eslint": "4.5.14",
     "@vue/cli-service": "4.5.14",
@@ -50,6 +49,7 @@
     "eslint-plugin-vue": "5.2.3",
     "hard-source-webpack-plugin": "0.13.1",
     "sass": "1.43.2",
+    "sass-loader": "7.3.1",
     "vue-cli-plugin-element": "1.0.1",
     "vue-cli-plugin-vuetify": "2.4.3",
     "vue-template-compiler": "2.6.14",

package/src/components/LTextEditor/LinkBox.vue

@@ -27,8 +27,8 @@
 </template>
 
 <script>
-import urlRegex from 'url-regex-safe'
-import { addProtocol } from './helpers/manageLinks'
+import Autolinker from 'autolinker'
+import { addProtocol } from './helpers/addProtocol'
 
 export default {
   props: {
@@ -57,7 +57,10 @@ export default {
     },
 
     isLinkValid(link) {
-      return urlRegex({ exact: true }).test(link)
+      const validating = Autolinker.link(link, {
+        email: false,
+      })
+      return validating.includes('href')
     },
   },
 

package/src/components/LTextEditor/helpers/addProtocol.js

@@ -0,0 +1,5 @@
+export function addProtocol(link) {
+  return link.startsWith('http://') || link.startsWith('https://')
+    ? link
+    : 'https://' + link
+}

package/src/components/LTextEditor/index.vue

@@ -87,9 +87,10 @@ import LinkBox from './LinkBox'
 import FloatingLink from './FloatingLink.vue'
 
 //Helpers
-import { getTagA, mountLink } from './helpers/manageLinks.js'
+import { getTagA } from './helpers/addProtocol.js'
 import removeEmptyTags from './helpers/removeEmptyTags.js'
 import DOMPurify from 'dompurify'
+import Autolinker from 'autolinker'
 
 export default {
   tagName: 'l-text-editor',
@@ -237,7 +238,7 @@ export default {
     finalText() {
       const textEditorHTML = this.editor.getHTML()
       const textEditorHTMLSpaced = this.addSpaceToFinalParagraphTag(textEditorHTML)
-      const textEditorHTMLWithLinks = mountLink(textEditorHTMLSpaced)
+      const textEditorHTMLWithLinks = Autolinker.link(textEditorHTMLSpaced)
 
       return DOMPurify.sanitize(removeEmptyTags(textEditorHTMLWithLinks), {
         ADD_ATTR: ['target'],

package/src/components/LTextEditor/helpers/manageLinks.js

@@ -1,60 +0,0 @@
-const urlRegex = require('url-regex-safe')
-
-const customUrlRegex = new RegExp(
-  '((href=")?)' +
-  urlRegex({
-    localhost: false,
-    apostrophes: false,
-    returnString: true,
-  }) +
-  ' ((</a>)?)',
-  'g'
-)
-
-function mountTagA(url) {
-  const href = addProtocol(url)
-  return getTagA(removeAnchorTag(href), url)
-}
-
-export function getTagA(href, insertedText) {
-  return `<a target="_blank" rel="noopener noreferrer nofollow" class="color-link" 
-  style="text-decoration: underline" href="${href}">${insertedText}</a>`
-}
-
-function removeAnchorTag(string) {
-  return string.replace("</a>", "")
-}
-
-export function addProtocol(link) {
-  return link.startsWith('http://') || link.startsWith('https://')
-    ? link
-    : 'https://' + link
-}
-
-export function mountLink(text) {
-  // Regular expression to match email addresses
-  const emailRegex = /(\b[\w.%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b)/g;
-
-  // Replace each email address in text with a mailto link
-  let finalText = text.replace(emailRegex, (email) => {
-    const href = `mailto:${email}`;
-    return getTagA(href, email);
-  });
-  let match;
-
-  // Loop through the text to find and replace URLs
-  while ((match = customUrlRegex.exec(finalText)) !== null) {
-    const url = match[0];
-
-    // Skip URLs that are parto of email addresses or already within anchor tags
-    if (finalText[match.index - 1] === '@' || url.startsWith('href="') || url.endsWith('</a>')) {
-      continue;
-    }
-    const finalIndex = match.index + url.length;
-    const finalUrl = mountTagA(url);
-
-    // Replace the URL with the formatted ancho tag
-    finalText = finalText.substring(0, match.index) + finalUrl + finalText.substring(finalIndex);
-  }
-  return finalText;
-}