(function(a){function e(e){for(var u,r,d=e[0],c=e[1],i=e[2],l=0,f=[];l\?@\[\]\^_{|}~\$/,w=/\x09-\x0D\x20\x85\xA0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000/,_=/[0-9]+/,P=/(?:xn--[\-0-9a-z]+)/,U=/[a-z0-9!?\*'@\(\);:&=\+\$\/%#\[\]\-_\.,~|]/i,A=/[a-z0-9\-_&=#\/]/i,B=n(/[a-z#{cyrillicLettersAndMarks}0-9!*';:=+,.$/%#[\]\-\u2013_~@|&#{latinAccentChars}]/i,{cyrillicLettersAndMarks:b,latinAccentChars:C}),$=n("\\((?:#{validGeneralUrlPathChars}+|(?:#{validGeneralUrlPathChars}*\\(#{validGeneralUrlPathChars}+\\)#{validGeneralUrlPathChars}*))\\)",{validGeneralUrlPathChars:B},"i"),z=n(/[+\-a-z#{cyrillicLettersAndMarks}0-9=_#/#{latinAccentChars}]|(?:#{validUrlBalancedParens})/i,{cyrillicLettersAndMarks:b,latinAccentChars:C,validUrlBalancedParens:$}),j=n(/(?:[^A-Za-z0-9@＠$#＃#{invalidCharsGroup}]|[#{directionalMarkersGroup}]|^)/,{invalidCharsGroup:y,directionalMarkersGroup:g}),F=o("#{punct}#{spacesGroup}#{invalidCharsGroup}#{directionalMarkersGroup}",{punct:k,spacesGroup:w,invalidCharsGroup:y,directionalMarkersGroup:g}),S=n(/[^#{invalidDomainChars}]/,{invalidDomainChars:F}),L=n(/(?:(?:#{validDomainChars}(?:-|#{validDomainChars})*)?#{validDomainChars}\.)/,{validDomainChars:S}),E=n(/(?:(?:#{validDomainChars}(?:[_-]|#{validDomainChars})*)?#{validDomainChars}\.)/,{validDomainChars:S}),D=n(/(?:#{validSubdomain}*#{validDomainName}(?:#{validGTLD}|#{validCCTLD}|#{validPunycode}))/,{validDomainName:L,validSubdomain:E,validGTLD:i,validCCTLD:d,validPunycode:P}),T=n("(?:(?:#{validGeneralUrlPathChars}*(?:#{validUrlBalancedParens}#{validGeneralUrlPathChars}*)*#{validUrlPathEndingChars})|(?:@#{validGeneralUrlPathChars}+/))",{validGeneralUrlPathChars:B,validUrlBalancedParens:$,validUrlPathEndingChars:z},"i"),M=n(/(?:[#{bmpLetterAndMarks}]|(?=#{nonBmpCodePairs})(?:#{astralLetterAndMarks}))/,{bmpLetterAndMarks:h,nonBmpCodePairs:x,astralLetterAndMarks:l}),N=n(/(?:[#{bmpLetterAndMarks}#{bmpNumerals}#{hashtagSpecialChars}]|(?=#{nonBmpCodePairs})(?:#{astralLetterAndMarks}|#{astralNumerals}))/,{bmpLetterAndMarks:h,bmpNumerals:p,hashtagSpecialChars:v,nonBmpCodePairs:x,astralLetterAndMarks:l,astralNumerals:f}),W=n(/(?:^|\uFE0E|\uFE0F|$|(?!#{hashtagAlphaNumeric}|&)#{codePoint})/,{codePoint:m,hashtagAlphaNumeric:N}),G=/(?:^|[^a-zA-Z0-9_!#$%&*@＠]|(?:^|[^a-zA-Z0-9_+~.-])(?:rt|RT|rT|Rt):?)/,O=n("((#{validUrlPrecedingChars})((https?:\\/\\/)?(#{validDomain})(?::(#{validPortNumber}))?(\\/#{validUrlPath}*)?(\\?#{validUrlQueryChars}*#{validUrlQueryEndingChars})?))",{validUrlPrecedingChars:j,validDomain:D,validPortNumber:_,validUrlPath:T,validUrlQueryChars:U,validUrlQueryEndingChars:A},"gi"),H=n(/(?:(?:[-a-z0-9#{latinAccentChars}]+)\.)+(?:#{validGTLD}|#{validCCTLD}|#{validPunycode})/gi,{latinAccentChars:C,validGTLD:i,validCCTLD:d,validPunycode:P}),R=(n(/^https?:\/\/t\.co\/([a-z0-9]+)(?:\?#{validUrlQueryChars}*#{validUrlQueryEndingChars})?/,{validUrlQueryChars:U,validUrlQueryEndingChars:A},"i"),/[#＃]/),q=n(/^(?:#{hashSigns}|:\/\/)/,{hashSigns:R}),V=n(/(#{hashtagBoundary})(#{hashSigns})(?!\uFE0F|\u20E3)(#{hashtagAlphaNumeric}*#{hashtagAlpha}#{hashtagAlphaNumeric}*)/gi,{hashtagBoundary:W,hashSigns:R,hashtagAlphaNumeric:N,hashtagAlpha:M}),Q=/[@＠]/,Z=n(/^(?:#{atSigns}|[#{latinAccentChars}]|:\/\/)/,{atSigns:Q,latinAccentChars:C}),I=n("(#{validMentionPrecedingChars})(#{atSigns})([a-zA-Z0-9_]{1,20})",{validMentionPrecedingChars:G,atSigns:Q},"g");var J=function(a){if(!a||!a.match(Q))return[];const e=[];return a.replace(I,(function(a,t,u,s,n,r){const d=r.slice(n+a.length);if(!d.match(Z)){const a=n+t.length,u=a+s.length+1;e.push({username:s,indices:[a,u]})}})),e},K=function(a){if(!a||!a.match(R))return[];let e=[];return a.replace(V,(function(a,t,u,s,n,r){const d=r.slice(n+a.length);if(d.match(q))return;const c=n+t.length,i=c+s.length+1;e.push({hashtag:s,indices:[c,i]})})),e},X=t("1985"),Y=t.n(X);const aa=63,ea="xn--",ta={toAscii:function(a){if(a.substring(0,4)===ea&&!a.match(H))return;const e=a.split(".");for(let t=0;taa)return}return e.join(".")}};var ua=ta;const sa="https://",na={extractUrlsWithoutProtocol:!0},ra=4096,da=/[-_./]$/;function ca(a,e,t){let u=a.length;const s=ua.toAscii(t);return!(!s||!s.length)&&(u=u+s.length-t.length,e.length+u<=ra)}const ia=function(a,e=na){if(!a||(e.extractUrlsWithoutProtocol?!a.match(/\./):!a.match(/:/)))return[];const t=[];while(O.exec(a)){const a=RegExp.$2;let u=RegExp.$3;const s=RegExp.$4,n=RegExp.$5,r=RegExp.$7;let d=O.lastIndex;const c=d-u.length;if(ca(u,s||sa,n))if(s)t.push({url:u,indices:[c,d]});else{if(!e.extractUrlsWithoutProtocol||a.match(da))continue;let s=null,i=0;if(n.replace(H,(function(a){const e=n.indexOf(a,i);i=e+a.length,s={url:a,indices:[c+e,c+i]},t.push(s)})),null==s)continue;r&&(s.url=u.replace(n,s.url),s.indices[1]=d)}}return t};var oa=ia,la=function(a){a.sort((function(a,e){return a.indices[0]-e.indices[0]}));let e=a[0];for(let t=1;ta[t].indices[0]?(a.splice(t,1),t--):e=a[t]},fa=function(a,e){const t=oa(a,e).concat(J(a)).concat(K(a));return 0===t.length?[]:(la(t),t)};const ha={"&":"&",">":">","<":"<",'"':""","'":"'"};function pa(a){return a&&a.replace(/[&"'><]/g,(function(a){return ha[a]}))}function ma(a){const e={};for(const t in a)a.hasOwnProperty(t)&&(e[t]=a[t]);return e}function ba(a,e){return a.replace(/#\{(\w+)\}/g,(function(a,t){return e[t]||""}))}const ga={disabled:!0,readonly:!0,multiple:!0,checked:!0},va={urlClass:!0,usernameClass:!0,hashtagClass:!0,usernameUrlBase:!0,hashtagUrlBase:!0,targetBlank:!0,urlTarget:!0,invisibleTagAttrs:!0,linkAttributeBlock:!0,htmlEscapeNonEntities:!0,extractUrlsWithoutProtocol:!0};var ya=function(a){const e={};for(const t in a){let u=a[t];va[t]||(ga[t]&&(u=u?t:null),null!=u&&(e[t]=u))}return e};const Ca={disabled:!0,readonly:!0,multiple:!0,checked:!0};function xa(a){let e="";for(const t in a){let u=a[t];Ca[t]&&(u=u?t:null),null!=u&&(e+=` ${pa(t)}="${pa(u.toString())}"`)}return e}var ka=function(a,e,t,u){const s={text:e,attr:xa(t)};return ba("#{text}",s)};const wa=/^https?:\/\//i;var _a=function(a,e,t){let u=a.url;const s=u;let n=pa(s);const r=ma(t.htmlAttrs||{});return u.match(wa)||(u=`http://${u}`),r.href=u,t.targetBlank&&(r.target="_blank"),t.urlClass&&(r["class"]=t.urlClass),t.urlTarget&&(r.target=t.urlTarget),ka(a,n,r,t)},Pa=function(a,e,t){const u=e.substring(a.indices[0],a.indices[0]+1),s=pa(a.username),n=ma(t.htmlAttrs||{});return n.href=t.usernameUrlBase+s,n.title=`@${s}`,n["class"]=t.usernameClass,n["data-username"]=s,ka(a,`${u}${s}`,n,t)};const Ua=/[\u0600-\u06FF]|[\u0750-\u077F]|[\u0590-\u05FF]|[\uFE70-\uFEFF]/gm;var Aa=function(a,e,t){const u=e.substring(a.indices[0],a.indices[0]+1),s=pa(a.hashtag),n=ma(t.htmlAttrs||{});return n.href=t.hashtagUrlBase+s,n.title=`#${s}`,n["class"]=t.hashtagClass,n["data-hashtag"]=s,s.charAt(0).match(Ua)&&(n["class"]+=" rtl"),ka(a,`${u}${s}`,n,t)};const Ba="highlights username",$a="highlights hashtag",za="highlights url";var ja=function(a,e,t){let u=ma(t||{});u.usernameClass=u.usernameClass||Ba,u.usernameUrlBase=u.usernameUrlBase||"/",u.hashtagClass=u.hashtagClass||$a,u.hashtagUrlBase=u.hashtagUrlBase||"/hashtag/",u.urlClass=u.urlClass||za,u.htmlAttrs=ya(u),u.invisibleTagAttrs=u.invisibleTagAttrs||"style='position:absolute;left:-9999px;'";let s="",n=0;e.sort((function(a,e){return a.indices[0]-e.indices[0]}));for(let r=0;r#{text}",t)}const Ta={targetBlank:!0,extractUrlsWithoutProtocol:!0};function Ma(a,e=Ta){const t=fa(a,e);return ja(a,t,e)}function Na(a,e=Ta){const t=fa(a,e);return Ea(a,t,e)}function Wa(a,e,t){if(t||(t=document.createRange(),t.selectNode(a),t.setStart(a,0)),0===e.count)t.setEnd(a,e.count);else if(a&&e.count>0)if(3===a.nodeType)a.textContent.length=0){const t=Wa(a,{count:e}),u=window.getSelection();t&&(t.collapse(!1),u.removeAllRanges(),u.addRange(t))}}function Oa(a,e){return Na(a,e)}function Ha(a,e){return Ma(a,e)}var Ra={name:"VueHighlights",props:{extractUrlsWithoutProtocol:{type:Boolean,default:!0},caretColor:{type:String,default:"#ccc"},placeholder:{type:String,default:"What's Happening?"},value:String},data(){return{focused:!1,body:""}},computed:{showPlaceholder(){return!this.body.replace(/^\s*\n/gm,"").length},computedBody(){return Na(this.body,{extractUrlsWithoutProtocol:this.extractUrlsWithoutProtocol})}},methods:{getCaretPos(){const a=this.$refs.mbody,e=window.getSelection();let t=e.focusNode,u=e.focusOffset;while(t){if(t===a)break;if(t.previousSibling)t=t.previousSibling,u+=t.textContent.length;else if(t=t.parentNode,null===t)break}return u},setCaretPos(a){Ga(this.$refs.mbody,a)},clear(){this.$refs.mbody.innerText="",this.body=""},onKeyUp(a){let e=this.getCaretPos();13===a.keyCode&&e++,this.body=a.target.innerText,this.$emit("input",this.body),this.$nextTick(()=>{this.setCaretPos(e)})},onFocus(a){this.focused=!0,this.$emit("focus",a)},onBlur(a){this.focused=!1,this.$emit("blur",a)}},render(a){const e=this.showPlaceholder?a("div",{attrs:{id:"mplaceholder"},staticClass:"highlights__placeholder"},this.placeholder):null,t={ref:"mbody",staticClass:"highlights__body",style:{"text-align":"initial",outline:"currentcolor none medium","user-select":"text","white-space":"pre-wrap","overflow-wrap":"break-word","caret-color":`${this.caretColor}`},attrs:{"aria-label":this.placeHolder,"aria-autocomplete":"list","aria-describedby":"mplaceholder","aria-multiline":"true",contenteditable:!0,role:"textbox",spellCheck:!0,tabindex:0},domProps:{innerHTML:this.computedBody},on:{focus:this.onFocus,blur:this.onBlur,keyup:this.onKeyUp}};return a("div",{staticClass:"highlights__container",style:{position:"relative"}},[a("div",{staticClass:"highlights__content"},[e,a("div",{staticClass:"highlights__body-container"},[a("div",t)])])])}},qa=function(){var a=this,e=a.$createElement,u=a._self._c||e;return u("div",{attrs:{id:"app"}},[u("nav",{attrs:{id:"nav"}},[u("div",{staticClass:"flex vcenter between container"},[u("div",{staticClass:"flex vcenter"},[u("img",{staticClass:"mr-sm",attrs:{alt:"Vue logo",src:t("bd36")}}),u("router-link",{attrs:{to:"/"}},[u("h1",[a._v("vue-highlights")])])],1),u("div",{staticClass:"flex vcenter"},[u("router-link",{staticClass:"nav-item",attrs:{to:{name:"home"}}},[a._v(" Home ")]),u("router-link",{staticClass:"nav-item",attrs:{to:{name:"docs"}}},[a._v(" Documentation ")]),u("a",{staticClass:"nav-item",attrs:{href:"https://github.com/pggalaviz/vue-highlights",title:"Github",target:"_blank"}},[u("div",{staticClass:"nav-icon"},[u("svg",{attrs:{viewBox:"0 0 16 16"}},[u("path",{attrs:{d:"M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"}})])])])],1)])]),u("router-view"),a._m(0)],1)},Va=[function(){var a=this,e=a.$createElement,t=a._self._c||e;return t("footer",{staticClass:"flex center py-md mt-lg",attrs:{id:"footer"}},[t("div",{staticClass:"text-center"},[t("div",[a._v(" © 2019 Pedro G. Galaviz ")]),t("a",{staticClass:"text-sm",attrs:{href:"http://pggalaviz.com"}},[a._v("pggalaviz.com")])])])}],Qa={name:"App"},Za=Qa,Ia=(t("cac6"),t("2877")),Ja=Object(Ia["a"])(Za,qa,Va,!1,null,null,null),Ka=Ja.exports,Xa=function(){var a=this,e=a.$createElement,u=a._self._c||e;return u("div",{staticClass:"text-center",attrs:{id:"home"}},[u("img",{attrs:{id:"logo",alt:"Vue logo",src:t("bd36")}}),u("h1",[a._v("vue-highlights")]),a._m(0),a._m(1),u("div",{staticClass:"flex center text-md"},[u("vue-highlights",{staticClass:"content-container",attrs:{placeholder:a.placeholder,caretColor:a.caretColor,extractUrlsWithoutProtocol:a.options.extractUrlsWithoutProtocol},model:{value:a.text,callback:function(e){a.text=e},expression:"text"}})],1),u("div",{staticClass:"flex center my-md"},[u("div",{staticClass:"content-container",attrs:{id:"options"}},[u("h4",[a._v("Options (props)")]),u("div",{staticClass:"flex center"},[u("label",{staticClass:"mr-lg cursor-pointer",attrs:{for:"ep"}},[u("input",{directives:[{name:"model",rawName:"v-model",value:a.options.extractUrlsWithoutProtocol,expression:"options.extractUrlsWithoutProtocol"}],attrs:{id:"ep",type:"checkbox"},domProps:{checked:Array.isArray(a.options.extractUrlsWithoutProtocol)?a._i(a.options.extractUrlsWithoutProtocol,null)>-1:a.options.extractUrlsWithoutProtocol},on:{change:function(e){var t=a.options.extractUrlsWithoutProtocol,u=e.target,s=!!u.checked;if(Array.isArray(t)){var n=null,r=a._i(t,n);u.checked?r<0&&a.$set(a.options,"extractUrlsWithoutProtocol",t.concat([n])):r>-1&&a.$set(a.options,"extractUrlsWithoutProtocol",t.slice(0,r).concat(t.slice(r+1)))}else a.$set(a.options,"extractUrlsWithoutProtocol",s)}}}),a._v(" extractUrlsWithoutProtocol ")]),u("label",{staticClass:"cursor-pointer",attrs:{for:"tb"}},[u("input",{directives:[{name:"model",rawName:"v-model",value:a.options.targetBlank,expression:"options.targetBlank"}],attrs:{id:"tb",type:"checkbox"},domProps:{checked:Array.isArray(a.options.targetBlank)?a._i(a.options.targetBlank,null)>-1:a.options.targetBlank},on:{change:function(e){var t=a.options.targetBlank,u=e.target,s=!!u.checked;if(Array.isArray(t)){var n=null,r=a._i(t,n);u.checked?r<0&&a.$set(a.options,"targetBlank",t.concat([n])):r>-1&&a.$set(a.options,"targetBlank",t.slice(0,r).concat(t.slice(r+1)))}else a.$set(a.options,"targetBlank",s)}}}),a._v(" targetBlank ")])]),u("div",{staticClass:"flex center mt-sm text-left relative"},[u("div",{staticClass:"mr-md col-50"},[u("label",{staticClass:"label cursor-pointer",attrs:{for:"uc"}},[a._v(" usernameClass ")]),u("input",{directives:[{name:"model",rawName:"v-model",value:a.options.usernameClass,expression:"options.usernameClass"}],staticClass:"input",attrs:{id:"uc",type:"text"},domProps:{value:a.options.usernameClass},on:{input:function(e){e.target.composing||a.$set(a.options,"usernameClass",e.target.value)}}})]),u("div",{staticClass:"col-50"},[u("label",{staticClass:"label cursor-pointer",attrs:{for:"ut"}},[a._v(" usernameUrlBase ")]),u("div",[u("input",{directives:[{name:"model",rawName:"v-model",value:a.options.usernameUrlBase,expression:"options.usernameUrlBase"}],staticClass:"input",attrs:{id:"ut",type:"text"},domProps:{value:a.options.usernameUrlBase},on:{input:function(e){e.target.composing||a.$set(a.options,"usernameUrlBase",e.target.value)}}})])])]),u("div",{staticClass:"flex center mt-sm text-left"},[u("div",{staticClass:"mr-md col-50"},[u("label",{staticClass:"label cursor-pointer",attrs:{for:"hc"}},[a._v(" hashtagClass ")]),u("div",[u("input",{directives:[{name:"model",rawName:"v-model",value:a.options.hashtagClass,expression:"options.hashtagClass"}],staticClass:"input",attrs:{id:"hc",type:"text"},domProps:{value:a.options.hashtagClass},on:{input:function(e){e.target.composing||a.$set(a.options,"hashtagClass",e.target.value)}}})])]),u("div",{staticClass:"col-50"},[u("label",{staticClass:"label cursor-pointer",attrs:{for:"ht"}},[a._v(" hashtagUrlBase ")]),u("div",[u("input",{directives:[{name:"model",rawName:"v-model",value:a.options.hashtagUrlBase,expression:"options.hashtagUrlBase"}],staticClass:"input",attrs:{id:"ht",type:"text"},domProps:{value:a.options.hashtagUrlBase},on:{input:function(e){e.target.composing||a.$set(a.options,"hashtagUrlBase",e.target.value)}}})])])]),u("div",{staticClass:"flex center mt-sm text-left"},[u("div",{staticClass:"mr-md col-50"},[u("label",{staticClass:"label cursor-pointer",attrs:{for:"urc"}},[a._v(" urlClass ")]),u("div",[u("input",{directives:[{name:"model",rawName:"v-model",value:a.options.urlClass,expression:"options.urlClass"}],staticClass:"input",attrs:{id:"urc",type:"text"},domProps:{value:a.options.urlClass},on:{input:function(e){e.target.composing||a.$set(a.options,"urlClass",e.target.value)}}})])]),u("div",{staticClass:"col-50"},[u("label",{staticClass:"label cursor-pointer",attrs:{for:"cc"}},[a._v(" caretColor ")]),u("div",[u("input",{directives:[{name:"model",rawName:"v-model",value:a.caretColor,expression:"caretColor"}],staticClass:"input",attrs:{id:"cc",type:"text"},domProps:{value:a.caretColor},on:{input:function(e){e.target.composing||(a.caretColor=e.target.value)}}})])])])])]),u("div",{staticClass:"column center vcenter"},[u("div",{staticClass:"mb-md"},[u("h4",[a._v("HTML with links:")]),u("div",{staticClass:"content-container text-md",domProps:{innerHTML:a._s(a.$autoLink(a.text,a.options))}})]),u("div",{staticClass:"mb-md"},[u("h4",[a._v("Text with links:")]),u("div",{staticClass:"content-container"},[a._v(" "+a._s(a.$autoLink(a.text,a.options)))])]),u("div",{staticClass:"mb-md"},[u("h4",[a._v("Model text:")]),u("div",{staticClass:"content-container"},[a._v(" "+a._s(a.text))])])])])},Ya=[function(){var a=this,e=a.$createElement,t=a._self._c||e;return t("div",{staticClass:"mb-md",attrs:{id:"description"}},[t("b",[a._v("Easy mention, hashtag and URL highlight for Vue 2.x")])])},function(){var a=this,e=a.$createElement,t=a._self._c||e;return t("div",{staticClass:"flex center mb-md text-sm"},[t("div",{staticClass:"pa-md font-mono content-container",attrs:{id:"install"}},[a._v(" npm install --save vue-highlights ")])])}],ae={name:"Home",data:function(){return{placeholder:"Write something here, include @mentions, #hashtags and URLs...",text:"Hi there! @pggalaviz #vue pggalaviz.com",caretColor:"#ff3b8e",options:{targetBlank:!0,extractUrlsWithoutProtocol:!0,usernameClass:"highlights username",usernameUrlBase:"#/",hashtagClass:"highlights hashtag",hashtagUrlBase:"#/hashtag/",urlClass:"highlights url"}}}},ee=ae,te=(t("2062"),Object(Ia["a"])(ee,Xa,Ya,!1,null,null,null)),ue=te.exports,se=function(){var a=this,e=a.$createElement,t=a._self._c||e;return t("div",{attrs:{id:"docs"}},[t("div",{staticClass:"container"},[t("h2",[a._v("Documentation")]),t("h3",[a._v("Installation")]),t("p",[a._v("You can install via npm or yarn:")]),t("CodeSnippet",{attrs:{lang:"shell",code:a.code1}}),t("p",[a._v("And then import the component in your app:")]),t("CodeSnippet",{attrs:{lang:"js",code:a.code2}}),t("h3",[a._v("Usage")]),t("p",[a._v("Let's create our first component:")]),t("CodeSnippet",{attrs:{lang:"js",code:a.code3}}),t("p",[a._v("As you can see, the component accepts some props:")]),a._m(0),t("p",[a._v(" The exported component (vue-highlights) renders a text input that highlights all username, hashtag and URL matches. In order to work with this input some CSS classes should be attended, here's an example: ")]),t("CodeSnippet",{attrs:{lang:"css",code:a.code4}}),t("p",[a._v("With this we should get a working example.")]),a._m(1),a._m(2),t("h5",[a._v("Examples")]),t("CodeSnippet",{attrs:{lang:"js",code:a.code5}}),t("p",[a._v("Now we can render our linked/highlighted text anywhere we like:")]),t("CodeSnippet",{attrs:{lang:"js",code:a.code6}})],1)])},ne=[function(){var a=this,e=a.$createElement,t=a._self._c||e;return t("table",{staticClass:"text-sm",staticStyle:{width:"100%"}},[t("thead",{staticClass:"mb-sm"},[t("tr",[t("th",[a._v("Prop")]),t("th",{staticClass:"px-sm"},[a._v("Type")]),t("th",{attrs:{colspan:"2"}},[a._v("Description")])])]),t("tbody",[t("tr",[t("td",{staticClass:"props-name-col"},[t("div",{staticClass:"props-name"},[a._v(" extractUrlsWithoutProtocol ")])]),t("td",{staticClass:"props-type-col px-sm"},[t("div",{staticClass:"props-type"},[a._v(" Boolean ")])]),t("td",{staticClass:"props-desc-col"},[t("div",{staticClass:"props-desc"},[a._v(" As the name says, when active, the compoponet will try to match URLs even when a protocol (http://, https://) is not found. "),t("b",[a._v("Defaults to true")])])])]),t("tr",[t("td",{staticClass:"props-name-col"},[t("div",{staticClass:"props-name"},[a._v(" caretColor ")])]),t("td",{staticClass:"props-type-col px-sm"},[t("div",{staticClass:"props-type"},[a._v(" String ")])]),t("td",{staticClass:"props-desc-col"},[t("div",{staticClass:"props-desc"},[a._v(" A valid HEX color (eg. #ccc, #ff4545). ")])])]),t("tr",[t("td",{staticClass:"props-name-col"},[t("div",{staticClass:"props-name"},[a._v(" placeholder ")])]),t("td",{staticClass:"props-type-col px-sm"},[t("div",{staticClass:"props-type"},[a._v(" String ")])]),t("td",{staticClass:"props-desc-col"},[t("div",{staticClass:"props-desc"},[a._v(" A placeholder to show when no text is entered. ")])])]),t("tr",[t("td",{staticClass:"props-name-col"},[t("div",{staticClass:"props-name"},[a._v(" usernameClass ")])]),t("td",{staticClass:"props-type-col px-sm"},[t("div",{staticClass:"props-type"},[a._v(" String ")])]),t("td",{staticClass:"props-desc-col"},[t("div",{staticClass:"props-desc"},[a._v(" The CSS class(es) that will be added to a @username match. ")])])]),t("tr",[t("td",{staticClass:"props-name-col"},[t("div",{staticClass:"props-name"},[a._v(" hashtagClass ")])]),t("td",{staticClass:"props-type-col px-sm"},[t("div",{staticClass:"props-type"},[a._v(" String ")])]),t("td",{staticClass:"props-desc-col"},[t("div",{staticClass:"props-desc"},[a._v(" The CSS class(es) that will be added to a #hashtag match. ")])])]),t("tr",[t("td",{staticClass:"props-name-col"},[t("div",{staticClass:"props-name"},[a._v(" urlClass ")])]),t("td",{staticClass:"props-type-col px-sm"},[t("div",{staticClass:"props-type"},[a._v(" String ")])]),t("td",{staticClass:"props-desc-col"},[t("div",{staticClass:"props-desc"},[a._v(" The CSS class(es) that will be added to a URL match. ")])])])])])},function(){var a=this,e=a.$createElement,t=a._self._c||e;return t("p",[a._v("As you can see when we first imported the package, 2 functions are also exported: "),t("b",[a._v("autoLink")]),a._v(" and "),t("b",[a._v("autoHighlight")]),a._v(". ")])},function(){var a=this,e=a.$createElement,t=a._self._c||e;return t("p",[a._v(" Both return a "),t("b",[a._v("String")]),a._v(" value which contains our highlighted text. "),t("b",[a._v("autoLink")]),a._v(" returns the matches found between "),t("b",[a._v("anchor")]),a._v(" tags for links. "),t("b",[a._v("autoHighlight")]),a._v(" returns the matches found between "),t("b",[a._v("span")]),a._v(" tags for highlight only. ")])}],re=function(){var a=this,e=a.$createElement,t=a._self._c||e;return t("div",{staticClass:"code-snippet box relative flex"},[t("div",{staticClass:"language"},[a._v(a._s(a.lang))]),t("div",{staticClass:"line-numbers"},a._l(a.lineCount,(function(e){return t("div",{key:e,staticClass:"line-number"},[a._v(a._s(e))])})),0),t("div",{staticClass:"render",domProps:{innerHTML:a._s(a.result)}})])},de=[],ce=(t("498a"),t("1487")),ie=t.n(ce),oe={name:"CodeSnippet",props:{code:String,lang:String},computed:{result:function(){var a=ie.a.highlight(this.lang,this.code.trim());return a.value},lineCount:function(){for(var a=this.result,e=0,t=0;t\n"),ge="\n.highlights__content {\n position: relative;\n}\n\n.highlights__placeholder {\n color: #ccc;\n position: absolute;\n top: 16px;\n left: 16px;\n z-index: -1;\n}\n\n.highlights__body-container {\n border-radius: 5px;\n border: 1px solid #eaeaea;\n padding: 16px;\n}\n\n.highlights__body {\n min-height: 60px;\n}\n\n.highlights {\n color: #ff3b8e;\n}\n",ve='\nimport { autoLink, autoHighlight } from \'vue-highlights\'\n\nconst text = \'my @username, my #hashtag and myurl.com\'\n\nconst autoLinked = autoLink(text, {\n extractUrlsWithoutProtocol: true, // Defaults to true\n targetBlank: true, // Defauls to true, applies only in URLs\n usernameClass: \'username-class\',\n usernameUrlBase: \'/users/\',\n hashtagClass: \'hashtag-class\',\n hashtagUrlBase: \'/myhashtags/\',\n urlClass: \'url-class\'\n})\n\n/*\nautoLinked:\nmy @username, my #hashtag\nand myurl.com\n*/\n\nconst autoHighlighted = autoHighlight(text, {\n extractUrlsWithoutProtocol: true, // Defaults to true\n usernameClass: \'username-class\',\n hashtagClass: \'hashtag-class\',\n urlClass: \'url-class\'\n})\n\n/*\nautoLinked:\nmy @username, my \n#hashtag and myurl.com\n*/\n',ye="\n\n\n