Fixed two way binding

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,
-        mentionsWithDots: this.mentionsWithDots
+        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol
       })
     }
   },

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,
-        mentionsWithDots: this.mentionsWithDots
+        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol
       })
     }
   },

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'
@@ -31,18 +27,22 @@ export default {
   },
   data () {
     return {
-      focused: false,
-      body: ''
+      focused: false
     }
   },
   computed: {
+    valueModel: {
+      get () { return this.value },
+      set (value) {
+        this.$emit('input', value)
+      }
+    },
     showPlaceholder () {
-      return !this.body.replace(/^\s*\n/gm, '').length
+      return !this.valueModel.replace(/^\s*\n/gm, '').length
     },
     computedBody () {
-      return highlight(this.body, {
-        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol,
-        mentionsWithDots: this.mentionsWithDots
+      return highlight(this.valueModel, {
+        extractUrlsWithoutProtocol: this.extractUrlsWithoutProtocol
       })
     }
   },
@@ -69,15 +69,14 @@ export default {
     },
     clear () {
       this.$refs.mbody.innerText = ''
-      this.body = ''
+      this.valueModel = ''
     },
     onKeyUp (e) {
       let caretPosition = this.getCaretPos()
       if (e.keyCode === 13) { // Enter key
         caretPosition++
       }
-      this.body = e.target.innerText
-      this.$emit('input', this.body)
+      this.valueModel = e.target.innerText
       this.$nextTick(() => {
         this.setCaretPos(caretPosition)
       })

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,
-  mentionsWithDots: true
+  extractUrlsWithoutProtocol: 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,
-  mentionsWithDots: false
+  extractUrlsWithoutProtocol: true
 }
 
 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'
-)