Ignore keys used for text highlight

README.md

@@ -58,7 +58,6 @@ 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,10 +1675,6 @@ function src_autoLink (text, options) {
       type: Boolean,
       default: true
     },
-    mentionsWithDots: {
-      type: Boolean,
-      default: false
-    },
     caretColor: {
       type: String,
       default: '#ccc'
@@ -1701,8 +1697,7 @@ 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,10 +1684,6 @@ function src_autoLink (text, options) {
       type: Boolean,
       default: true
     },
-    mentionsWithDots: {
-      type: Boolean,
-      default: false
-    },
     caretColor: {
       type: String,
       default: '#ccc'
@@ -1710,8 +1706,7 @@ function src_autoLink (text, options) {
     },
     computedBody () {
       return highlight(this.body, {
-        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol,
+        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol
-        mentionsWithDots: this.mentionsWithDots
       })
     }
   },

docs-src/Home.vue

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

src/index.js

@@ -15,10 +15,6 @@ export default {
       type: Boolean,
       default: true
     },
-    mentionsWithDots: {
-      type: Boolean,
-      default: false
-    },
     caretColor: {
       type: String,
       default: '#ccc'
@@ -41,8 +37,7 @@ export default {
     },
     computedBody () {
       return highlight(this.body, {
-        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol,
+        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol
-        mentionsWithDots: this.mentionsWithDots
       })
     }
   },
@@ -72,8 +67,11 @@ export default {
       this.body = ''
     },
     onKeyUp (e) {
+      const keysToIgnore = ['Shift', 'Meta', 'Control', 'Alt', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
+      if (keysToIgnore.includes(e.key)) return
+
       let caretPosition = this.getCaretPos()
-      if (e.keyCode === 13) { // Enter key
+      if (e.key === 'Enter') {
         caretPosition++
       }
       this.body = e.target.innerText

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, options))
+    .concat(extractMentions(text))
     .concat(extractHashtags(text))
 
   if (entities.length === 0) {

src/utils/extractHtmlAttrs.js

@@ -17,8 +17,7 @@ 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,16 +1,15 @@
 // Extracts mentions from text.
 
-import { atSigns, endMentionMatch, validMention, validDotMention } from './regex'
+import { atSigns, endMentionMatch, validMention } from './regex'
 
-export default function (text, options) {
+export default function (text) {
   if (!text || !text.match(atSigns)) {
     return []
   }
 
   const mentions = []
-  const mentionRegex = options.mentionsWithDots ? validDotMention : validMention
 
-  text.replace(mentionRegex, function (match, before, atSign, mentionText, offset, chunk) {
+  text.replace(validMention, 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,8 +4,7 @@ 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

@@ -194,11 +194,3 @@ export const validMention = regexSupplant(
   { validMentionPrecedingChars, atSigns },
   'g'
 )
-export const validDotMention = 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'
-)