Made mentionWithDots available as a prop

README.md

@@ -58,6 +58,7 @@ As you can see, the component accepts some props:
 | ---- | ---- | -------- |
 | value | String | The text to highlight (**v-model**). |
 | extractUrlsWithoutProtocol | Boolean | As the name says, when active, the compoponet will try to match URLs even when a protocol (http://, https://) is not found. **Defaults to true** |
+| mentionsWithDots | Boolean | Whether a mention can contain a dot. **Defaults to false** |
 | caretColor | String | A valid HEX color (eg. #ccc, #ff4545). |
 | placeholder | String | A placeholder to show when no text is entered. |
 | usernameClass | String | The CSS class(es) that will be added to a @username match. |

dist/vue-highlights.common.js

@@ -1083,7 +1083,7 @@ const endMentionMatch = _regexSupplant(/^(?:#{atSigns}|[#{latinAccentChars}]|:\/
 const validMention = _regexSupplant(
   '(#{validMentionPrecedingChars})' + // $1: Preceding character
   '(#{atSigns})' + // $2: At mark
-  '([a-zA-Z0-9_]{1,20})', // $3: Screen name
+  '([a-zA-Z0-9_\.]{1,20})', // $3: Screen name
   // '(/[a-zA-Z][a-zA-Z0-9_-]{0,24})?', // $4: List (optional)
   { validMentionPrecedingChars, atSigns },
   'g'
@@ -1675,6 +1675,10 @@ function src_autoLink (text, options) {
       type: Boolean,
       default: true
     },
+    mentionsWithDots: {
+      type: Boolean,
+      default: false
+    },
     caretColor: {
       type: String,
       default: '#ccc'
@@ -1697,7 +1701,8 @@ function src_autoLink (text, options) {
     },
     computedBody () {
       return highlight(this.body, {
-        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol
+        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol,
+        mentionsWithDots: this.mentionsWithDots
       })
     }
   },

dist/vue-highlights.umd.js

@@ -1092,7 +1092,7 @@ const endMentionMatch = _regexSupplant(/^(?:#{atSigns}|[#{latinAccentChars}]|:\/
 const validMention = _regexSupplant(
   '(#{validMentionPrecedingChars})' + // $1: Preceding character
   '(#{atSigns})' + // $2: At mark
-  '([a-zA-Z0-9_]{1,20})', // $3: Screen name
+  '([a-zA-Z0-9_\.]{1,20})', // $3: Screen name
   // '(/[a-zA-Z][a-zA-Z0-9_-]{0,24})?', // $4: List (optional)
   { validMentionPrecedingChars, atSigns },
   'g'
@@ -1684,6 +1684,10 @@ function src_autoLink (text, options) {
       type: Boolean,
       default: true
     },
+    mentionsWithDots: {
+      type: Boolean,
+      default: false
+    },
     caretColor: {
       type: String,
       default: '#ccc'
@@ -1706,7 +1710,8 @@ function src_autoLink (text, options) {
     },
     computedBody () {
       return highlight(this.body, {
-        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol
+        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol,
+        mentionsWithDots: this.mentionsWithDots
       })
     }
   },

docs-src/Home.vue

@@ -21,6 +21,7 @@
         :placeholder="placeholder"
         :caretColor="caretColor"
         :extractUrlsWithoutProtocol="options.extractUrlsWithoutProtocol"
+        :mentionsWithDots="options.mentionsWithDots"
       />
     </div>
 
@@ -28,14 +29,18 @@
       <div id="options" class="content-container">
         <h4>Options (props)</h4>
         <div class="flex center">
-          <label for="ep" class="mr-lg cursor-pointer">
+          <label for="ep" class="cursor-pointer">
             <input id="ep" type="checkbox" v-model="options.extractUrlsWithoutProtocol">
             extractUrlsWithoutProtocol
           </label>
-          <label for="tb" class="cursor-pointer">
+          <label for="tb" class="mx-lg cursor-pointer">
             <input id="tb" type="checkbox" v-model="options.targetBlank">
             targetBlank
           </label>
+          <label for="md" class="cursor-pointer">
+            <input id="md" type="checkbox" v-model="options.mentionsWithDots">
+            mentionsWithDots
+          </label>
         </div>
 
         <div class="flex center mt-sm text-left relative">
@@ -130,6 +135,7 @@ export default {
       options: {
         targetBlank: true,
         extractUrlsWithoutProtocol: true,
+        mentionsWithDots: false,
         usernameClass: 'highlights username',
         usernameUrlBase: '#/',
         hashtagClass: 'highlights hashtag',

src/index.js

@@ -15,6 +15,10 @@ export default {
       type: Boolean,
       default: true
     },
+    mentionsWithDots: {
+      type: Boolean,
+      default: false
+    },
     caretColor: {
       type: String,
       default: '#ccc'
@@ -37,7 +41,8 @@ export default {
     },
     computedBody () {
       return highlight(this.body, {
-        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol
+        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol,
+        mentionsWithDots: this.mentionsWithDots
       })
     }
   },

src/utils/extract.js

@@ -8,7 +8,7 @@ import removeOverlappingEntities from './removeOverlappingEntities'
 
 export default function (text, options) {
   const entities = extractUrls(text, options)
-    .concat(extractMentions(text))
+    .concat(extractMentions(text, options))
     .concat(extractHashtags(text))
 
   if (entities.length === 0) {

src/utils/extractHtmlAttrs.js

@@ -17,7 +17,8 @@ const OPTIONS_NOT_ATTRIBUTES = {
   invisibleTagAttrs: true,
   linkAttributeBlock: true,
   htmlEscapeNonEntities: true,
-  extractUrlsWithoutProtocol: true
+  extractUrlsWithoutProtocol: true,
+  mentionsWithDots: true
 }
 
 export default function (options) {

src/utils/extractMentions.js

@@ -1,15 +1,16 @@
 // Extracts mentions from text.
 
-import { atSigns, endMentionMatch, validMention } from './regex'
+import { atSigns, endMentionMatch, validMention, validDotMention } from './regex'
 
-export default function (text) {
+export default function (text, options) {
   if (!text || !text.match(atSigns)) {
     return []
   }
 
   const mentions = []
+  const mentionRegex = options.mentionsWithDots ? validDotMention : validMention
 
-  text.replace(validMention, function (match, before, atSign, mentionText, offset, chunk) {
+  text.replace(mentionRegex, function (match, before, atSign, mentionText, offset, chunk) {
     const after = chunk.slice(offset + match.length)
     if (!after.match(endMentionMatch)) {
       const startPosition = offset + before.length

src/utils/index.js

@@ -4,7 +4,8 @@ import autoHighlight from './autoHighlight'
 
 const defaultOptions = {
   targetBlank: true,
-  extractUrlsWithoutProtocol: true
+  extractUrlsWithoutProtocol: true,
+  mentionsWithDots: false
 }
 
 export function link (text, options = defaultOptions) {

src/utils/regex/index.js

@@ -187,6 +187,14 @@ export const validHashtag = regexSupplant(
 export const atSigns = /[@＠]/
 export const endMentionMatch = regexSupplant(/^(?:#{atSigns}|[#{latinAccentChars}]|:\/\/)/, { atSigns, latinAccentChars })
 export const validMention = regexSupplant(
+  '(#{validMentionPrecedingChars})' + // $1: Preceding character
+  '(#{atSigns})' + // $2: At mark
+  '([a-zA-Z0-9_]{1,20})', // $3: Screen name
+  // '(/[a-zA-Z][a-zA-Z0-9_-]{0,24})?', // $4: List (optional)
+  { validMentionPrecedingChars, atSigns },
+  'g'
+)
+export const validDotMention = regexSupplant(
   '(#{validMentionPrecedingChars})' + // $1: Preceding character
   '(#{atSigns})' + // $2: At mark
   '([a-zA-Z0-9_\.]{1,20})', // $3: Screen name