├── .browserslistrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── babel.config.js ├── dist ├── demo.html ├── vue-highlights.common.js ├── vue-highlights.common.js.map ├── vue-highlights.umd.js ├── vue-highlights.umd.js.map ├── vue-highlights.umd.min.js └── vue-highlights.umd.min.js.map ├── docs-src ├── App.vue ├── Docs.vue ├── Home.vue ├── assets │ └── logo.png ├── components │ └── CodeSnippet.vue ├── main.js └── styles │ ├── base.styl │ ├── main.styl │ ├── reset.styl │ ├── spacing.styl │ ├── typo.styl │ └── variables.styl ├── docs ├── css │ └── app.1798b04c.css ├── img │ └── logo.82b9c7a5.png ├── index.html ├── js │ ├── app.bcf033dd.js │ ├── app.bcf033dd.js.map │ ├── chunk-vendors.173b11bb.js │ └── chunk-vendors.173b11bb.js.map └── logo.png ├── jest.config.js ├── package-lock.json ├── package.json ├── public ├── index.html └── logo.png ├── src ├── index.js └── utils │ ├── autoHighlight.js │ ├── autoLink.js │ ├── extract.js │ ├── extractHashtags.js │ ├── extractHtmlAttrs.js │ ├── extractMentions.js │ ├── extractUrls.js │ ├── helpers.js │ ├── idna.js │ ├── index.js │ ├── linkToHashtag.js │ ├── linkToMention.js │ ├── linkToText.js │ ├── linkToUrl.js │ ├── regex │ ├── _regexSupplant.js │ ├── _validCCTLD.js │ ├── _validGTLD.js │ └── index.js │ └── removeOverlappingEntities.js ├── tests └── unit │ └── basic.spec.js └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | }, 17 | overrides: [ 18 | { 19 | files: [ 20 | '**/__tests__/*.{j,t}s?(x)', 21 | '**/tests/unit/**/*.spec.{j,t}s?(x)' 22 | ], 23 | env: { 24 | jest: true 25 | } 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | coverage/ 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | .tern-port 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs/ 2 | docs-src/ 3 | tests/ 4 | coverage/ 5 | .babelrc 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pedro G. Galaviz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FTNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE.I 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-highlights 2 | 3 | Easy @mention, #hashtag and URL highlight for Vue 2.x 4 | 5 | ## Installation 6 | 7 | You can install via npm or yarn: 8 | 9 | ```shell 10 | npm install --save vue-highlights 11 | yarn add vue-highlights 12 | ``` 13 | 14 | And then import the component in your app: 15 | 16 | ```javascript 17 | import Vue from 'vue' 18 | import VueHighlights, { autoLink, autoHighlight } from 'vue-highlights' 19 | 20 | // Install component 21 | Vue.component(VueHighlights.name, VueHighlights) 22 | ``` 23 | 24 | You can check a demo here: [pggalaviz.github.io/vue-highlights](https://pggalaviz.github.io/vue-highlights) 25 | 26 | ## Usage 27 | 28 | Let's create our first component: 29 | 30 | ```javascript 31 | 42 | 43 | 53 | ``` 54 | 55 | As you can see, the component accepts some props: 56 | 57 | | Prop | Type | Description | 58 | | ---- | ---- | -------- | 59 | | value | String | The text to highlight (**v-model**). | 60 | | 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** | 61 | | caretColor | String | A valid HEX color (eg. #ccc, #ff4545). | 62 | | placeholder | String | A placeholder to show when no text is entered. | 63 | | usernameClass | String | The CSS class(es) that will be added to a @username match. | 64 | | hashtagClass | String | The CSS class(es) that will be added to a #hashtag match. | 65 | | urlClass | String | The CSS class(es) that will be added to a URL match. | 66 | 67 | 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: 68 | 69 | ```css 70 | .highlights__content { 71 | position: relative; 72 | } 73 | 74 | .highlights__placeholder { 75 | color: #ccc; 76 | position: absolute; 77 | top: 16px; 78 | left: 16px; 79 | z-index: -1; 80 | } 81 | 82 | .highlights__body-container { 83 | border-radius: 5px; 84 | border: 1px solid #eaeaea; 85 | padding: 16px; 86 | } 87 | 88 | .highlights__body { 89 | min-height: 60px; 90 | } 91 | 92 | .highlights { 93 | color: #ff3b8e; 94 | } 95 | ``` 96 | 97 | With this we should get a working example. 98 | 99 | As you can see when we first imported the package, 2 functions are also exported: **autoLink** and **autoHighlight**. 100 | 101 | Both return a **String** value which contains our highlighted text. **autoLink** returns the matches found between **anchor** tags for links. **autoHighlight** returns the matches found between **span** tags for highlight only. 102 | 103 | #### Examples 104 | 105 | ```javascript 106 | import { autoLink, autoHighlight } from 'vue-highlights' 107 | 108 | const text = 'my @username, my #hashtag and myurl.com' 109 | 110 | const autoLinked = autoLink(text, { 111 | extractUrlsWithoutProtocol: true, // Defaults to true 112 | targetBlank: true, // Defauls to true, applies only in URLs 113 | usernameClass: 'username-class', 114 | usernameUrlBase: '/users/', 115 | hashtagClass: 'hashtag-class', 116 | hashtagUrlBase: '/myhashtags/', 117 | urlClass: 'url-class' 118 | }) 119 | 120 | /* 121 | autoLinked: 122 | my @username, my #hashtag 125 | and myurl.com 126 | */ 127 | 128 | const autoHighlighted = autoHighlight(text, { 129 | extractUrlsWithoutProtocol: true, // Defaults to true 130 | usernameClass: 'username-class', 131 | hashtagClass: 'hashtag-class', 132 | urlClass: 'url-class' 133 | }) 134 | 135 | /* 136 | autoHighlighted: 137 | my @username, my 138 | #hashtag and myurl.com 139 | */ 140 | ``` 141 | 142 | Now we can render our linked/highlighted text anywhere we like: 143 | 144 | ```javascript 145 | 150 | 151 | 166 | ``` 167 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /dist/demo.html: -------------------------------------------------------------------------------- 1 | 2 | vue-highlights demo 3 | 4 | 5 | 6 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /dist/vue-highlights.umd.min.js: -------------------------------------------------------------------------------- 1 | (function(u,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-highlights"]=e():u["vue-highlights"]=e()})("undefined"!==typeof self?self:this,(function(){return function(u){var e={};function a(d){if(e[d])return e[d].exports;var t=e[d]={i:d,l:!1,exports:{}};return u[d].call(t.exports,t,t.exports,a),t.l=!0,t.exports}return a.m=u,a.c=e,a.d=function(u,e,d){a.o(u,e)||Object.defineProperty(u,e,{enumerable:!0,get:d})},a.r=function(u){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(u,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(u,"__esModule",{value:!0})},a.t=function(u,e){if(1&e&&(u=a(u)),8&e)return u;if(4&e&&"object"===typeof u&&u&&u.__esModule)return u;var d=Object.create(null);if(a.r(d),Object.defineProperty(d,"default",{enumerable:!0,value:u}),2&e&&"string"!=typeof u)for(var t in u)a.d(d,t,function(e){return u[e]}.bind(null,t));return d},a.n=function(u){var e=u&&u.__esModule?function(){return u["default"]}:function(){return u};return a.d(e,"a",e),e},a.o=function(u,e){return Object.prototype.hasOwnProperty.call(u,e)},a.p="",a(a.s="fb15")}({1985:function(u,e,a){(function(u,d){var t;/*! https://mths.be/punycode v1.4.1 by @mathias */(function(n){e&&e.nodeType,u&&u.nodeType;var r="object"==typeof d&&d;r.global!==r&&r.window!==r&&r.self;var c,i=2147483647,o=36,s=1,f=26,l=38,b=700,h=72,g=128,p="-",m=/^xn--/,v=/[^\x20-\x7E]/,y=/[\x2E\u3002\uFF0E\uFF61]/g,k={overflow:"Overflow: input needs wider integers to process","not-basic":"Illegal input >= 0x80 (not a basic code point)","invalid-input":"Invalid input"},w=o-s,x=Math.floor,C=String.fromCharCode;function P(u){throw new RangeError(k[u])}function j(u,e){var a=u.length,d=[];while(a--)d[a]=e(u[a]);return d}function F(u,e){var a=u.split("@"),d="";a.length>1&&(d=a[0]+"@",u=a[1]),u=u.replace(y,".");var t=u.split("."),n=j(t,e).join(".");return d+n}function A(u){var e,a,d=[],t=0,n=u.length;while(t=55296&&e<=56319&&t65535&&(u-=65536,e+=C(u>>>10&1023|55296),u=56320|1023&u),e+=C(u),e})).join("")}function U(u){return u-48<10?u-22:u-65<26?u-65:u-97<26?u-97:o}function E(u,e){return u+22+75*(u<26)-((0!=e)<<5)}function $(u,e,a){var d=0;for(u=a?x(u/b):u>>1,u+=x(u/e);u>w*f>>1;d+=o)u=x(u/w);return x(d+(w+1)*u/(u+l))}function D(u){var e,a,d,t,n,r,c,l,b,m,v=[],y=u.length,k=0,w=g,C=h;for(a=u.lastIndexOf(p),a<0&&(a=0),d=0;d=128&&P("not-basic"),v.push(u.charCodeAt(d));for(t=a>0?a+1:0;t=y&&P("invalid-input"),l=U(u.charCodeAt(t++)),(l>=o||l>x((i-k)/r))&&P("overflow"),k+=l*r,b=c<=C?s:c>=C+f?f:c-C,lx(i/m)&&P("overflow"),r*=m}e=v.length+1,C=$(k-n,e,0==n),x(k/e)>i-w&&P("overflow"),w+=x(k/e),k%=e,v.splice(k++,0,w)}return z(v)}function B(u){var e,a,d,t,n,r,c,l,b,m,v,y,k,w,j,F=[];for(u=A(u),y=u.length,e=g,a=0,n=h,r=0;r=e&&vx((i-a)/k)&&P("overflow"),a+=(c-e)*k,e=c,r=0;ri&&P("overflow"),v==e){for(l=a,b=o;;b+=o){if(m=b<=n?s:b>=n+f?f:b-n,l\?@\[\]\^_{|}~\$/,x=/\x09-\x0D\x20\x85\xA0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000/,C=/[0-9]+/,P=/(?:xn--[\-0-9a-z]+)/,j=/[a-z0-9!?\*'@\(\);:&=\+\$\/%#\[\]\-_\.,~|]/i,F=/[a-z0-9\-_&=#\/]/i,A=t(/[a-z#{cyrillicLettersAndMarks}0-9!*';:=+,.$/%#[\]\-\u2013_~@|&#{latinAccentChars}]/i,{cyrillicLettersAndMarks:g,latinAccentChars:y}),z=t("\\((?:#{validGeneralUrlPathChars}+|(?:#{validGeneralUrlPathChars}*\\(#{validGeneralUrlPathChars}+\\)#{validGeneralUrlPathChars}*))\\)",{validGeneralUrlPathChars:A},"i"),U=t(/[+\-a-z#{cyrillicLettersAndMarks}0-9=_#/#{latinAccentChars}]|(?:#{validUrlBalancedParens})/i,{cyrillicLettersAndMarks:g,latinAccentChars:y,validUrlBalancedParens:z}),E=t(/(?:[^A-Za-z0-9@＠$#＃#{invalidCharsGroup}]|[#{directionalMarkersGroup}]|^)/,{invalidCharsGroup:v,directionalMarkersGroup:p}),$=o("#{punct}#{spacesGroup}#{invalidCharsGroup}#{directionalMarkersGroup}",{punct:w,spacesGroup:x,invalidCharsGroup:v,directionalMarkersGroup:p}),D=t(/[^#{invalidDomainChars}]/,{invalidDomainChars:$}),B=t(/(?:(?:#{validDomainChars}(?:-|#{validDomainChars})*)?#{validDomainChars}\.)/,{validDomainChars:D}),S=t(/(?:(?:#{validDomainChars}(?:[_-]|#{validDomainChars})*)?#{validDomainChars}\.)/,{validDomainChars:D}),_=t(/(?:#{validSubdomain}*#{validDomainName}(?:#{validGTLD}|#{validCCTLD}|#{validPunycode}))/,{validDomainName:B,validSubdomain:S,validGTLD:i,validCCTLD:r,validPunycode:P}),T=t("(?:(?:#{validGeneralUrlPathChars}*(?:#{validUrlBalancedParens}#{validGeneralUrlPathChars}*)*#{validUrlPathEndingChars})|(?:@#{validGeneralUrlPathChars}+/))",{validGeneralUrlPathChars:A,validUrlBalancedParens:z,validUrlPathEndingChars:U},"i"),M=t(/(?:[#{bmpLetterAndMarks}]|(?=#{nonBmpCodePairs})(?:#{astralLetterAndMarks}))/,{bmpLetterAndMarks:l,nonBmpCodePairs:k,astralLetterAndMarks:s}),G=t(/(?:[#{bmpLetterAndMarks}#{bmpNumerals}#{hashtagSpecialChars}]|(?=#{nonBmpCodePairs})(?:#{astralLetterAndMarks}|#{astralNumerals}))/,{bmpLetterAndMarks:l,bmpNumerals:b,hashtagSpecialChars:m,nonBmpCodePairs:k,astralLetterAndMarks:s,astralNumerals:f}),L=t(/(?:^|\uFE0E|\uFE0F|$|(?!#{hashtagAlphaNumeric}|&)#{codePoint})/,{codePoint:h,hashtagAlphaNumeric:G}),N=/(?:^|[^a-zA-Z0-9_!#$%&*@＠]|(?:^|[^a-zA-Z0-9_+~.-])(?:rt|RT|rT|Rt):?)/,O=t("((#{validUrlPrecedingChars})((https?:\\/\\/)?(#{validDomain})(?::(#{validPortNumber}))?(\\/#{validUrlPath}*)?(\\?#{validUrlQueryChars}*#{validUrlQueryEndingChars})?))",{validUrlPrecedingChars:E,validDomain:_,validPortNumber:C,validUrlPath:T,validUrlQueryChars:j,validUrlQueryEndingChars:F},"gi"),q=t(/(?:(?:[-a-z0-9#{latinAccentChars}]+)\.)+(?:#{validGTLD}|#{validCCTLD}|#{validPunycode})/gi,{latinAccentChars:y,validGTLD:i,validCCTLD:r,validPunycode:P}),R=(t(/^https?:\/\/t\.co\/([a-z0-9]+)(?:\?#{validUrlQueryChars}*#{validUrlQueryEndingChars})?/,{validUrlQueryChars:j,validUrlQueryEndingChars:F},"i"),/[#＃]/),W=t(/^(?:#{hashSigns}|:\/\/)/,{hashSigns:R}),I=t(/(#{hashtagBoundary})(#{hashSigns})(?!\uFE0F|\u20E3)(#{hashtagAlphaNumeric}*#{hashtagAlpha}#{hashtagAlphaNumeric}*)/gi,{hashtagBoundary:L,hashSigns:R,hashtagAlphaNumeric:G,hashtagAlpha:M}),Q=/[@＠]/,Z=t(/^(?:#{atSigns}|[#{latinAccentChars}]|:\/\/)/,{atSigns:Q,latinAccentChars:y}),H=t("(#{validMentionPrecedingChars})(#{atSigns})([a-zA-Z0-9_]{1,20})",{validMentionPrecedingChars:N,atSigns:Q},"g");var K=function(u){if(!u||!u.match(Q))return[];const e=[];return u.replace(H,(function(u,a,d,t,n,r){const c=r.slice(n+u.length);if(!c.match(Z)){const u=n+a.length,d=u+t.length+1;e.push({username:t,indices:[u,d]})}})),e},V=function(u){if(!u||!u.match(R))return[];let e=[];return u.replace(I,(function(u,a,d,t,n,r){const c=r.slice(n+u.length);if(c.match(W))return;const i=n+a.length,o=i+t.length+1;e.push({hashtag:t,indices:[i,o]})})),e},J=a("1985"),X=a.n(J);const Y=63,uu="xn--",eu={toAscii:function(u){if(u.substring(0,4)===uu&&!u.match(q))return;const e=u.split(".");for(let a=0;aY)return}return e.join(".")}};var au=eu;const du="https://",tu={extractUrlsWithoutProtocol:!0},nu=4096,ru=/[-_./]$/;function cu(u,e,a){let d=u.length;const t=au.toAscii(a);return!(!t||!t.length)&&(d=d+t.length-a.length,e.length+d<=nu)}const iu=function(u,e=tu){if(!u||(e.extractUrlsWithoutProtocol?!u.match(/\./):!u.match(/:/)))return[];const a=[];while(O.exec(u)){const u=RegExp.$2;let d=RegExp.$3;const t=RegExp.$4,n=RegExp.$5,r=RegExp.$7;let c=O.lastIndex;const i=c-d.length;if(cu(d,t||du,n))if(t)a.push({url:d,indices:[i,c]});else{if(!e.extractUrlsWithoutProtocol||u.match(ru))continue;let t=null,o=0;if(n.replace(q,(function(u){const e=n.indexOf(u,o);o=e+u.length,t={url:u,indices:[i+e,i+o]},a.push(t)})),null==t)continue;r&&(t.url=d.replace(n,t.url),t.indices[1]=c)}}return a};var ou=iu,su=function(u){u.sort((function(u,e){return u.indices[0]-e.indices[0]}));let e=u[0];for(let a=1;au[a].indices[0]?(u.splice(a,1),a--):e=u[a]},fu=function(u,e){const a=ou(u,e).concat(K(u)).concat(V(u));return 0===a.length?[]:(su(a),a)};const lu={"&":"&",">":">","<":"<",'"':""","'":"'"};function bu(u){return u&&u.replace(/[&"'><]/g,(function(u){return lu[u]}))}function hu(u){const e={};for(const a in u)u.hasOwnProperty(a)&&(e[a]=u[a]);return e}function gu(u,e){return u.replace(/#\{(\w+)\}/g,(function(u,a){return e[a]||""}))}const pu={disabled:!0,readonly:!0,multiple:!0,checked:!0},mu={urlClass:!0,usernameClass:!0,hashtagClass:!0,usernameUrlBase:!0,hashtagUrlBase:!0,targetBlank:!0,urlTarget:!0,invisibleTagAttrs:!0,linkAttributeBlock:!0,htmlEscapeNonEntities:!0,extractUrlsWithoutProtocol:!0};var vu=function(u){const e={};for(const a in u){let d=u[a];mu[a]||(pu[a]&&(d=d?a:null),null!=d&&(e[a]=d))}return e};const yu={disabled:!0,readonly:!0,multiple:!0,checked:!0};function ku(u){let e="";for(const a in u){let d=u[a];yu[a]&&(d=d?a:null),null!=d&&(e+=` ${bu(a)}="${bu(d.toString())}"`)}return e}var wu=function(u,e,a,d){const t={text:e,attr:ku(a)};return gu("#{text}",t)};const xu=/^https?:\/\//i;var Cu=function(u,e,a){let d=u.url;const t=d;let n=bu(t);const r=hu(a.htmlAttrs||{});return d.match(xu)||(d=`http://${d}`),r.href=d,a.targetBlank&&(r.target="_blank"),a.urlClass&&(r["class"]=a.urlClass),a.urlTarget&&(r.target=a.urlTarget),wu(u,n,r,a)},Pu=function(u,e,a){const d=e.substring(u.indices[0],u.indices[0]+1),t=bu(u.username),n=hu(a.htmlAttrs||{});return n.href=a.usernameUrlBase+t,n.title=`@${t}`,n["class"]=a.usernameClass,n["data-username"]=t,wu(u,`${d}${t}`,n,a)};const ju=/[\u0600-\u06FF]|[\u0750-\u077F]|[\u0590-\u05FF]|[\uFE70-\uFEFF]/gm;var Fu=function(u,e,a){const d=e.substring(u.indices[0],u.indices[0]+1),t=bu(u.hashtag),n=hu(a.htmlAttrs||{});return n.href=a.hashtagUrlBase+t,n.title=`#${t}`,n["class"]=a.hashtagClass,n["data-hashtag"]=t,t.charAt(0).match(ju)&&(n["class"]+=" rtl"),wu(u,`${d}${t}`,n,a)};const Au="highlights username",zu="highlights hashtag",Uu="highlights url";var Eu=function(u,e,a){let d=hu(a||{});d.usernameClass=d.usernameClass||Au,d.usernameUrlBase=d.usernameUrlBase||"/",d.hashtagClass=d.hashtagClass||zu,d.hashtagUrlBase=d.hashtagUrlBase||"/hashtag/",d.urlClass=d.urlClass||Uu,d.htmlAttrs=vu(d),d.invisibleTagAttrs=d.invisibleTagAttrs||"style='position:absolute;left:-9999px;'";let t="",n=0;e.sort((function(u,e){return u.indices[0]-e.indices[0]}));for(let r=0;r#{text}",a)}const Tu={targetBlank:!0,extractUrlsWithoutProtocol:!0};function Mu(u,e=Tu){const a=fu(u,e);return Eu(u,a,e)}function Gu(u,e=Tu){const a=fu(u,e);return Su(u,a,e)}function Lu(u,e,a){if(a||(a=document.createRange(),a.selectNode(u),a.setStart(u,0)),0===e.count)a.setEnd(u,e.count);else if(u&&e.count>0)if(3===u.nodeType)u.textContent.length=0){const a=Lu(u,{count:e}),d=window.getSelection();a&&(a.collapse(!1),d.removeAllRanges(),d.addRange(a))}}function Ou(u,e){return Gu(u,e)}function qu(u,e){return Mu(u,e)}var Ru={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 Gu(this.body,{extractUrlsWithoutProtocol:this.extractUrlsWithoutProtocol})}},methods:{getCaretPos(){const u=this.$refs.mbody,e=window.getSelection();let a=e.focusNode,d=e.focusOffset;while(a){if(a===u)break;if(a.previousSibling)a=a.previousSibling,d+=a.textContent.length;else if(a=a.parentNode,null===a)break}return d},setCaretPos(u){Nu(this.$refs.mbody,u)},clear(){this.$refs.mbody.innerText="",this.body=""},onKeyUp(u){let e=this.getCaretPos();13===u.keyCode&&e++,this.body=u.target.innerText,this.$emit("input",this.body),this.$nextTick(()=>{this.setCaretPos(e)})},onFocus(u){this.focused=!0,this.$emit("focus",u)},onBlur(u){this.focused=!1,this.$emit("blur",u)}},render(u){const e=this.showPlaceholder?u("div",{attrs:{id:"mplaceholder"},staticClass:"highlights__placeholder"},this.placeholder):null,a={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 u("div",{staticClass:"highlights__container",style:{position:"relative"}},[u("div",{staticClass:"highlights__content"},[e,u("div",{staticClass:"highlights__body-container"},[u("div",a)])])])}};a.d(e,"autoHighlight",(function(){return Ou})),a.d(e,"autoLink",(function(){return qu}));e["default"]=Ru}})})); 2 | //# sourceMappingURL=vue-highlights.umd.min.js.map -------------------------------------------------------------------------------- /docs-src/App.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 43 | 44 | 91 | -------------------------------------------------------------------------------- /docs-src/Docs.vue: -------------------------------------------------------------------------------- 1 | 176 | 177 | 322 | 323 | 341 | -------------------------------------------------------------------------------- /docs-src/Home.vue: -------------------------------------------------------------------------------- 1 | 121 | 122 | 143 | 144 | 156 | -------------------------------------------------------------------------------- /docs-src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pggalaviz/vue-highlights/930cfc0d4935165543544d7ae3d387371670cc97/docs-src/assets/logo.png -------------------------------------------------------------------------------- /docs-src/components/CodeSnippet.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 38 | 39 | 68 | -------------------------------------------------------------------------------- /docs-src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import VueHighlights, { autoLink, autoHighlight } from '../src' 4 | import App from './App.vue' 5 | import Home from './Home.vue' 6 | import Docs from './Docs.vue' 7 | 8 | import './styles/main.styl' 9 | 10 | Vue.use(VueRouter) 11 | 12 | const router = new VueRouter({ 13 | routes: [ 14 | { path: '/', name: 'home', component: Home }, 15 | { path: '/docs', name: 'docs', component: Docs }, 16 | { path: '*', component: Home } 17 | ] 18 | }) 19 | 20 | Vue.component(VueHighlights.name, VueHighlights) 21 | Vue.prototype.$autoLink = autoLink 22 | Vue.prototype.$autoHighlight = autoHighlight 23 | 24 | Vue.config.productionTip = false 25 | 26 | new Vue({ 27 | router, 28 | render: h => h(App) 29 | }).$mount('#app') 30 | -------------------------------------------------------------------------------- /docs-src/styles/base.styl: -------------------------------------------------------------------------------- 1 | *, *:after, *:before 2 | box-sizing: border-box 3 | 4 | html, body 5 | width : 100% 6 | height: 100% 7 | 8 | html 9 | font-size: 100% 10 | text-size-adjust: 100% 11 | 12 | body 13 | overflow-x: hidden 14 | overflow-y: scroll 15 | background-color: $color-background 16 | min-height: 100% 17 | font-family: $font-helvetica 18 | font-size: $font-md 19 | line-height: $line-height-base 20 | font-weight: $font-weight-base 21 | color: $font-color-base 22 | text-rendering: optimizeLegibility 23 | scroll-behavior: smooth 24 | -webkit-font-smoothing: antialiased 25 | -moz-osx-font-smoothing: grayscale 26 | 27 | // Selection 28 | ::-moz-selection 29 | background-color: $color-brand-lighter 30 | color: $color-white 31 | ::selection 32 | background-color: $color-brand-lighter 33 | color: $color-white 34 | 35 | // Placeholder 36 | ::-webkit-input-placeholder 37 | color inherit 38 | opacity .7 39 | ::-moz-placeholder 40 | color inherit 41 | opacity .7 42 | :-ms-input-placeholder 43 | color inherit !important 44 | opacity .7 !important 45 | ::-ms-input-placeholder 46 | color inherit 47 | opacity .7 48 | ::placeholder 49 | color inherit 50 | opacity .7 51 | 52 | p 53 | margin: 0 54 | &:not(:last-child) 55 | margin-bottom: $space-base 56 | 57 | // Links 58 | a 59 | line-height: inherit 60 | transition: color 0.2s ease, border-bottom-color 0.2s ease 61 | border: none 62 | font-family: inherit 63 | color: $color-link 64 | text-decoration: none 65 | cursor: pointer 66 | &:focus 67 | outline: none 68 | &:hover 69 | color: $color-link-hover 70 | img 71 | border: 0 72 | &.router-exact-active // vue-router 73 | color: $color-gray-6 74 | h1, h2, h3, h4, h5 75 | color: $font-color-base 76 | 77 | // Images 78 | img 79 | width: 100% 80 | max-width: 100% 81 | height: auto 82 | 83 | pre 84 | background-color: lighten($color-border, 60%) 85 | padding: $space-base 86 | line-height: 1.5 87 | 88 | table 89 | width: 100% 90 | margin-bottom: $space-sm 91 | th 92 | font-weight: 800 93 | th, td 94 | padding-bottom: 16px 95 | text-align: center 96 | text-align: left 97 | vertical-align: middle 98 | 99 | // layout 100 | .flex 101 | .column 102 | display: flex 103 | &.center 104 | justify-content: center 105 | &.between 106 | justify-content: space-between 107 | &.vcenter 108 | align-items: center 109 | 110 | .column 111 | flex-direction: column 112 | 113 | .col-50 114 | width: 50% 115 | .col-25 116 | width: 25% 117 | 118 | .relative 119 | position: relative 120 | 121 | .container 122 | width: 960px 123 | max-width: 96% 124 | margin: 0 auto 125 | 126 | .content-container 127 | width: 560px 128 | max-width: 96% 129 | 130 | .cursor-pointer 131 | cursor: pointer 132 | -------------------------------------------------------------------------------- /docs-src/styles/main.styl: -------------------------------------------------------------------------------- 1 | @import 'variables' 2 | @import 'reset' 3 | @import 'base' 4 | @import 'spacing' 5 | @import 'typo' 6 | 7 | // Mentions 8 | 9 | .highlights__content 10 | position: relative 11 | 12 | .highlights__placeholder 13 | color: #ccc 14 | position: absolute 15 | top: $space-base 16 | left: $space-base 17 | z-index: -1 18 | 19 | .box, 20 | .highlights__body-container 21 | border-radius: 5px 22 | box-shadow: 0 5px 15px 0 rgba(80,86,98,.1), 0 2px 4px 0 rgba(199,202,209,.4) 23 | padding: $space-base 24 | 25 | .highlights__body 26 | min-height: 60px 27 | 28 | .highlights 29 | color: $color-primary 30 | 31 | .label 32 | display: block 33 | margin-bottom: 3px 34 | 35 | .input 36 | background-color: $color-background 37 | background-image: none 38 | border: 1px solid $color-gray-1 39 | border-radius: 4px 40 | color: $color-gray-9 41 | cursor: text 42 | display: block 43 | font-size: 12px 44 | height: 32px 45 | line-height: 12px 46 | max-width: 100% 47 | min-width: 100% 48 | padding: 2px 8px 49 | position: relative 50 | transition: all .2s 51 | width: 100% 52 | &:hover 53 | border-color: $color-gray-4 54 | &:focus, 55 | &.focus 56 | border-color: $color-brand 57 | outline: none 58 | -------------------------------------------------------------------------------- /docs-src/styles/reset.styl: -------------------------------------------------------------------------------- 1 | // Custom browser reset 2 | 3 | html, body, div, span, applet, object, iframe, 4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 5 | a, abbr, acronym, address, big, cite, code, 6 | del, dfn, em, img, ins, kbd, q, s, samp, 7 | small, strike, strong, sub, sup, tt, var, 8 | b, u, i, center, 9 | dl, dt, dd, ol, ul, li, 10 | fieldset, form, label, legend, 11 | table, caption, tbody, tfoot, thead, tr, th, td, 12 | article, aside, canvas, details, embed, 13 | figure, figcaption, footer, header, hgroup, 14 | menu, nav, output, ruby, section, summary, 15 | time, mark, audio, video, select 16 | margin: 0 17 | padding: 0 18 | border: 0 19 | font-size: 100% 20 | font: inherit 21 | vertical-align: baseline 22 | 23 | /* HTML5 display-role reset for older browsers */ 24 | article, aside, details, figcaption, figure, 25 | footer, header, hgroup, menu, nav, section, main 26 | display: block 27 | 28 | html 29 | font-family: sans-serif 30 | -ms-text-size-adjust: 100% 31 | -webkit-text-size-adjust: 100% 32 | 33 | body 34 | line-height: 1 35 | 36 | ol, ul 37 | list-style: none 38 | 39 | blockquote, q 40 | quotes: none 41 | 42 | blockquote:before, blockquote:after, 43 | q:before, q:after 44 | content: '' 45 | content: none 46 | 47 | table 48 | border-collapse: collapse 49 | border-spacing: 0 50 | 51 | figcaption, 52 | figure 53 | display: block 54 | 55 | hr 56 | box-sizing: content-box 57 | height: 0 58 | overflow: visible 59 | 60 | pre 61 | font-family: monospace, monospace 62 | font-size: 1em 63 | 64 | a 65 | background-color: transparent 66 | -webkit-text-decoration-skip: objects 67 | &:hover, 68 | &:active 69 | outline-width: 0 70 | 71 | 72 | abbr[title] 73 | border-bottom: none 74 | text-decoration: underline 75 | text-decoration: underline dotted 76 | 77 | b, 78 | strong 79 | font-weight: bolder 80 | 81 | code, 82 | kbd, 83 | samp 84 | font-family: monospace, monospace 85 | font-size: 1em 86 | 87 | dfn 88 | font-style: italic 89 | 90 | mark 91 | background-color: #ff0 92 | color: #000 93 | 94 | small 95 | font-size: 80% 96 | 97 | sub, 98 | sup 99 | font-size: 75% 100 | line-height: 0 101 | position: relative 102 | vertical-align: baseline 103 | 104 | sub 105 | bottom: -0.25em 106 | 107 | sup 108 | top: -0.5em 109 | 110 | audio, 111 | video, 112 | canvas 113 | display: inline-block 114 | 115 | audio:not([controls]) 116 | display: none 117 | height: 0 118 | 119 | img 120 | border-style: none 121 | 122 | svg:not(:root) 123 | overflow: hidden 124 | 125 | button, 126 | input, 127 | optgroup, 128 | select, 129 | textarea 130 | font-family: sans-serif 131 | font-size: 100% 132 | line-height: 1 133 | margin: 0 134 | 135 | button 136 | overflow: visible 137 | 138 | button, 139 | select 140 | text-transform: none 141 | 142 | button, 143 | html [type="button"], 144 | [type="reset"], 145 | [type="submit"] 146 | -webkit-appearance: button 147 | 148 | button, 149 | [type="button"], 150 | [type="reset"], 151 | [type="submit"] 152 | 153 | button::-moz-focus-inner, 154 | [type="button"]::-moz-focus-inner, 155 | [type="reset"]::-moz-focus-inner, 156 | [type="submit"]::-moz-focus-inner 157 | border-style: none 158 | padding: 0 159 | 160 | button:-moz-focusring, 161 | [type="button"]:-moz-focusring, 162 | [type="reset"]:-moz-focusring, 163 | [type="submit"]:-moz-focusring 164 | outline: 1px dotted ButtonText 165 | 166 | input 167 | overflow: visible 168 | 169 | [type="checkbox"], 170 | [type="radio"] 171 | box-sizing: border-box 172 | padding: 0 173 | 174 | [type="number"]::-webkit-inner-spin-button, 175 | [type="number"]::-webkit-outer-spin-button 176 | height: auto 177 | 178 | [type="search"] 179 | -webkit-appearance: textfield 180 | outline-offset: -2px 181 | 182 | [type="search"]::-webkit-search-cancel-button, 183 | [type="search"]::-webkit-search-decoration 184 | -webkit-appearance: none 185 | 186 | ::-webkit-file-upload-button 187 | -webkit-appearance: button 188 | font: inherit 189 | 190 | legend 191 | box-sizing: border-box 192 | display: table 193 | max-width: 100% 194 | padding: 0 195 | color: inherit 196 | white-space: normal 197 | 198 | progress 199 | display: inline-block 200 | vertical-align: baseline 201 | 202 | textarea 203 | overflow: auto 204 | 205 | summary 206 | display: list-item 207 | 208 | template 209 | display: none 210 | 211 | [hidden] 212 | display: none 213 | -------------------------------------------------------------------------------- /docs-src/styles/spacing.styl: -------------------------------------------------------------------------------- 1 | // Spacing 2 | 3 | for $space, $value in $global-spaces 4 | .pa-{$space} 5 | padding: $value 6 | .pl-{$space} 7 | padding-left: $value 8 | .pr-{$space} 9 | padding-right: $value 10 | .pt-{$space} 11 | padding-top: $value 12 | .pb-{$space} 13 | padding-bottom: $value 14 | .px-{$space} 15 | @extends .pl-{$space}, .pr-{$space} 16 | .py-{$space} 17 | @extends .pt-{$space}, .pb-{$space} 18 | 19 | .ma-{$space} 20 | margin: $value 21 | .ml-{$space} 22 | margin-left: $value 23 | .mr-{$space} 24 | margin-right: $value 25 | .mt-{$space} 26 | margin-top: $value 27 | .mb-{$space} 28 | margin-bottom: $value 29 | .mx-{$space} 30 | @extends .ml-{$space}, .mr-{$space} 31 | .my-{$space} 32 | @extends .mt-{$space}, .mb-{$space} 33 | -------------------------------------------------------------------------------- /docs-src/styles/typo.styl: -------------------------------------------------------------------------------- 1 | // Typo 2 | 3 | // Headings 4 | // ======== 5 | $--typo-header-font-family ?= $font-helvetica 6 | $--typo-header-font-weight ?= 800 7 | $--typo-header-font-style ?= normal 8 | $--typo-header-color ?= inherit 9 | $--typo-header-line-height ?= $global-line-height-heading 10 | $--typo-header-margin-bottom ?= $space-base/2 11 | 12 | strong, b 13 | font-weight: $font-weight-bold 14 | line-height: inherit 15 | 16 | h1, .h1, 17 | h2, .h2, 18 | h3, .h3, 19 | h4, .h4, 20 | h5, .h5, 21 | h6, .h6 22 | font-family: $--typo-header-font-family 23 | font-style: $--typo-header-font-style 24 | font-weight: $--typo-header-font-weight 25 | color: $--typo-header-color 26 | text-rendering: optimizeLegibility 27 | letter-spacing: -1px 28 | line-height: $--typo-header-line-height 29 | margin-bottom: $--typo-header-margin-bottom 30 | small 31 | line-height: 0 32 | color: $color-gray-light 33 | a 34 | color: inherit 35 | a:hover 36 | color: inherit 37 | 38 | h1, .h1 39 | font-size: $font-h1 40 | h2, .h2 41 | font-size: $font-h2 42 | h3, .h3 43 | font-size: $font-h3 44 | h4, .h4 45 | font-size: $font-h4 46 | h5, .h5 47 | font-size: $font-h5 48 | h6, .h6 49 | font-size: $font-h6 50 | text-transform: uppercase 51 | color: $color-gray 52 | letter-spacing: 0px 53 | 54 | // size 55 | .text-xs 56 | font-size: $font-xs 57 | .text-sm 58 | font-size: $font-sm 59 | .text-md 60 | font-size: $font-md 61 | .text-lg 62 | font-size: $font-lg 63 | .text-xl 64 | font-size: $font-xl 65 | 66 | .text-left 67 | text-align: left 68 | .text-center 69 | text-align: center 70 | .text-right 71 | text-align: right 72 | 73 | .font-mono 74 | font-family: $font-mono 75 | -------------------------------------------------------------------------------- /docs-src/styles/variables.styl: -------------------------------------------------------------------------------- 1 | // Variables 2 | 3 | // Color 4 | $color-primary ?= #ff3b8e 5 | $color-brand ?= $color-primary 6 | $color-brand-light ?= lighten($color-brand, 25%) 7 | $color-brand-lighter ?= lighten($color-brand, 50%) 8 | $color-brand-dark ?= darken($color-brand, 25%) 9 | $color-brand-darker ?= darken($color-brand, 50%) 10 | 11 | // Grays 12 | $color-gray ?= #828c8f 13 | $color-gray-1 ?= lighten($color-gray, 80%) 14 | $color-gray-2 ?= lighten($color-gray, 70%) 15 | $color-gray-3 ?= lighten($color-gray, 60%) 16 | $color-gray-4 ?= lighten($color-gray, 50%) 17 | $color-gray-5 ?= lighten($color-gray, 40%) 18 | $color-gray-6 ?= lighten($color-gray, 30%) 19 | $color-gray-7 ?= lighten($color-gray, 20%) 20 | $color-gray-8 ?= lighten($color-gray, 10%) 21 | $color-gray-9 ?= $color-gray 22 | $color-gray-10 ?= darken($color-gray, 10%) 23 | $color-gray-11 ?= darken($color-gray, 20%) 24 | $color-gray-12 ?= darken($color-gray, 30%) 25 | $color-gray-13 ?= darken($color-gray, 40%) 26 | $color-gray-14 ?= darken($color-gray, 50%) 27 | $color-gray-15 ?= darken($color-gray, 60%) 28 | $color-gray-16 ?= darken($color-gray, 70%) 29 | 30 | // Other colors 31 | $color-black ?= #0a0a0a 32 | $color-white ?= #fefefe 33 | $color-blue ?= #00B0E9 34 | $color-red ?= #f56c6c 35 | $color-yellow ?= #f5ad58 36 | $color-green ?= #67C23A 37 | $color-pink ?= #D3529B 38 | 39 | // App 40 | $color-danger ?= $color-red 41 | $color-warning ?= $color-yellow 42 | $color-success ?= $color-green 43 | $color-info ?= $color-blue 44 | $color-background ?= $color-white 45 | $color-border ?= #eaeaea 46 | 47 | // Links 48 | $color-link ?= $color-brand 49 | $color-link-hover ?= $color-gray-8 50 | $color-link-active ?= $color-gray-5 51 | 52 | // Space 53 | $space-base ?= 16px 54 | $space-sm ?= 8px 55 | $space-lg ?= 24px 56 | 57 | $global-spaces ?= { 58 | sm: $space-base * .5, 59 | md: $space-base, 60 | lg: $space-base * 1.25, 61 | } 62 | 63 | // Typo 64 | $font-helvetica ?= Helvetica neue, Helvetica, Arial, sans-serif 65 | $font-mono ?= Menlo, Monaco, Consolas, monospace 66 | $font-default ?= $font-helvetica 67 | 68 | $font-base ?= 14px 69 | $font-xs ?= 10px 70 | $font-sm ?= 12px 71 | $font-md ?= $font-base 72 | $font-lg ?= 16px 73 | $font-xl ?= 18px 74 | 75 | $font-h1 ?= 28px 76 | $font-h2 ?= 24px 77 | $font-h3 ?= 20px 78 | $font-h4 ?= 18px 79 | $font-h5 ?= 16px 80 | $font-h6 ?= 14px 81 | 82 | $font-weight-base ?= 400 83 | $font-weight-light ?= 300 84 | $font-weight-medium ?= 600 85 | $font-weight-bold ?= 700 86 | $font-weight-bolder ?= 800 87 | 88 | $font-color-base ?= $color-gray-12 89 | $font-color-light ?= $color-gray-4 90 | 91 | $line-height-base ?= 1.5 92 | $line-height-heading ?= 1.2 93 | -------------------------------------------------------------------------------- /docs/css/app.1798b04c.css: -------------------------------------------------------------------------------- 1 | #app{padding-top:80px}#footer,#nav{background-color:#fefefe;width:100%}#nav{border-bottom:1px solid #eaeaea;height:50px;left:0;position:fixed;top:0;z-index:5}#nav h1{line-height:50px;font-size:20px;margin:0}#nav img{width:24px;height:auto}.nav-item{color:#8f989a;font-size:12px;font-weight:700;margin-left:16px;-webkit-transition:all .3s ease;transition:all .3s ease}.nav-item:hover{color:#ff3b8e}.nav-icon{fill:#8f989a;height:auto;margin-top:4px;-webkit-transition:all .3s ease;transition:all .3s ease;width:20px}.nav-icon:hover{fill:#ff3b8e}#footer{border-top:1px solid #eaeaea}#logo{width:50px;height:auto}#install{background-color:#f7f7f7;line-height:1}.code-snippet{padding:0!important;margin-bottom:16px;font-family:Roboto Mono,monospace;overflow-y:scroll}.code-snippet .line-numbers,.code-snippet .render{padding:12px 12px}.code-snippet .line-numbers{color:#c1c6c7;border-radius:2px 0 0 2px;border-right:1px solid #eaeaea}.code-snippet .render{white-space:pre}.code-snippet .language{position:absolute;top:0;right:0;background:#e6e8e9;color:#828c8f;padding:3px 12px;border-radius:0 5px 0 4px}.props-name-col{width:30%}.props-type-col{width:10%}.props-name{color:#ff3b8e;font-weight:500}.props-type{color:#a8afb1;font-weight:600}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,select,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}html{font-family:sans-serif}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}figcaption,figure{display:block}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1;margin:0}button{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button],[type=button]::-moz-focus-inner,[type=reset],[type=reset]::-moz-focus-inner,[type=submit],[type=submit]::-moz-focus-inner,button,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}input{overflow:visible}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}legend{-webkit-box-sizing:border-box;box-sizing:border-box;display:table;max-width:100%;padding:0;color:inherit;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}summary{display:list-item}[hidden],template{display:none}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}body,html{width:100%;height:100%}html{font-size:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{overflow-x:hidden;overflow-y:scroll;background-color:#fefefe;min-height:100%;font-family:Helvetica neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;font-weight:400;color:#5a6265;text-rendering:optimizeLegibility;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-moz-selection{background-color:#ff9dc7;color:#fefefe}::selection{background-color:#ff9dc7;color:#fefefe}::-webkit-input-placeholder{color:inherit;opacity:.7}::-moz-placeholder{color:inherit;opacity:.7}:-ms-input-placeholder{color:inherit!important;opacity:.7!important}::-ms-input-placeholder{color:inherit;opacity:.7}::placeholder{color:inherit;opacity:.7}p{margin:0}p:not(:last-child){margin-bottom:16px}a{line-height:inherit;-webkit-transition:color .2s ease,border-bottom-color .2s ease;transition:color .2s ease,border-bottom-color .2s ease;border:none;font-family:inherit;color:#ff3b8e;text-decoration:none;cursor:pointer}a:focus{outline:none}a:hover{color:#8f989a}a img{border:0}a.router-exact-active{color:#a8afb1}a h1,a h2,a h3,a h4,a h5{color:#5a6265}img{width:100%;max-width:100%;height:auto}pre{background-color:#f7f7f7;padding:16px;line-height:1.5}table{width:100%;margin-bottom:8px}th{font-weight:800}td,th{padding-bottom:16px;text-align:center;text-align:left;vertical-align:middle}.column,.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.column.center,.flex.center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.column.between,.flex.between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.column.vcenter,.flex.vcenter{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.col-50{width:50%}.col-25{width:25%}.relative{position:relative}.container{width:960px;max-width:96%;margin:0 auto}.content-container{width:560px;max-width:96%}.cursor-pointer{cursor:pointer}.pa-sm{padding:8px}.pl-sm,.px-sm{padding-left:8px}.pr-sm,.px-sm{padding-right:8px}.pt-sm,.py-sm{padding-top:8px}.pb-sm,.py-sm{padding-bottom:8px}.ma-sm{margin:8px}.ml-sm,.mx-sm{margin-left:8px}.mr-sm,.mx-sm{margin-right:8px}.mt-sm,.my-sm{margin-top:8px}.mb-sm,.my-sm{margin-bottom:8px}.pa-md{padding:16px}.pl-md,.px-md{padding-left:16px}.pr-md,.px-md{padding-right:16px}.pt-md,.py-md{padding-top:16px}.pb-md,.py-md{padding-bottom:16px}.ma-md{margin:16px}.ml-md,.mx-md{margin-left:16px}.mr-md,.mx-md{margin-right:16px}.mt-md,.my-md{margin-top:16px}.mb-md,.my-md{margin-bottom:16px}.pa-lg{padding:20px}.pl-lg,.px-lg{padding-left:20px}.pr-lg,.px-lg{padding-right:20px}.pt-lg,.py-lg{padding-top:20px}.pb-lg,.py-lg{padding-bottom:20px}.ma-lg{margin:20px}.ml-lg,.mx-lg{margin-left:20px}.mr-lg,.mx-lg{margin-right:20px}.mt-lg,.my-lg{margin-top:20px}.mb-lg,.my-lg{margin-bottom:20px}b,strong{font-weight:700;line-height:inherit}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Helvetica neue,Helvetica,Arial,sans-serif;font-style:normal;font-weight:800;color:inherit;text-rendering:optimizeLegibility;letter-spacing:-1px;line-height:$global-line-height-heading;margin-bottom:8px}.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{line-height:0;color:$color-gray-light}.h1 a,.h1 a:hover,.h2 a,.h2 a:hover,.h3 a,.h3 a:hover,.h4 a,.h4 a:hover,.h5 a,.h5 a:hover,.h6 a,.h6 a:hover,h1 a,h1 a:hover,h2 a,h2 a:hover,h3 a,h3 a:hover,h4 a,h4 a:hover,h5 a,h5 a:hover,h6 a,h6 a:hover{color:inherit}.h1,h1{font-size:28px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px;text-transform:uppercase;color:#828c8f;letter-spacing:0}.text-xs{font-size:10px}.text-sm{font-size:12px}.text-md{font-size:14px}.text-lg{font-size:16px}.text-xl{font-size:18px}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:Menlo,Monaco,Consolas,monospace}.highlights__content{position:relative}.highlights__placeholder{color:#ccc;position:absolute;top:16px;left:16px;z-index:-1}.box,.highlights__body-container{border-radius:5px;-webkit-box-shadow:0 5px 15px 0 rgba(80,86,98,.1),0 2px 4px 0 rgba(199,202,209,.4);box-shadow:0 5px 15px 0 rgba(80,86,98,.1),0 2px 4px 0 rgba(199,202,209,.4);padding:16px}.highlights__body{min-height:60px}.highlights{color:#ff3b8e}.label{display:block;margin-bottom:3px}.input{background-color:#fefefe;background-image:none;border:1px solid #e6e8e9;border-radius:4px;color:#828c8f;cursor:text;display:block;font-size:12px;height:32px;line-height:12px;max-width:100%;min-width:100%;padding:2px 8px;position:relative;-webkit-transition:all .2s;transition:all .2s;width:100%}.input:hover{border-color:#c1c6c7}.input.focus,.input:focus{border-color:#ff3b8e;outline:none} -------------------------------------------------------------------------------- /docs/img/logo.82b9c7a5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pggalaviz/vue-highlights/930cfc0d4935165543544d7ae3d387371670cc97/docs/img/logo.82b9c7a5.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | vue-highlights
-------------------------------------------------------------------------------- /docs/js/app.bcf033dd.js: -------------------------------------------------------------------------------- 1 | (function(a){function e(e){for(var u,r,d=e[0],i=e[1],c=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:g,latinAccentChars:C}),$=n("\\((?:#{validGeneralUrlPathChars}+|(?:#{validGeneralUrlPathChars}*\\(#{validGeneralUrlPathChars}+\\)#{validGeneralUrlPathChars}*))\\)",{validGeneralUrlPathChars:B},"i"),z=n(/[+\-a-z#{cyrillicLettersAndMarks}0-9=_#/#{latinAccentChars}]|(?:#{validUrlBalancedParens})/i,{cyrillicLettersAndMarks:g,latinAccentChars:C,validUrlBalancedParens:$}),j=n(/(?:[^A-Za-z0-9@＠$#＃#{invalidCharsGroup}]|[#{directionalMarkersGroup}]|^)/,{invalidCharsGroup:y,directionalMarkersGroup:b}),F=o("#{punct}#{spacesGroup}#{invalidCharsGroup}#{directionalMarkersGroup}",{punct:k,spacesGroup:w,invalidCharsGroup:y,directionalMarkersGroup:b}),S=n(/[^#{invalidDomainChars}]/,{invalidDomainChars:F}),E=n(/(?:(?:#{validDomainChars}(?:-|#{validDomainChars})*)?#{validDomainChars}\.)/,{validDomainChars:S}),L=n(/(?:(?:#{validDomainChars}(?:[_-]|#{validDomainChars})*)?#{validDomainChars}\.)/,{validDomainChars:S}),D=n(/(?:#{validSubdomain}*#{validDomainName}(?:#{validGTLD}|#{validCCTLD}|#{validPunycode}))/,{validDomainName:E,validSubdomain:L,validGTLD:c,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):?)/,H=n("((#{validUrlPrecedingChars})((https?:\\/\\/)?(#{validDomain})(?::(#{validPortNumber}))?(\\/#{validUrlPath}*)?(\\?#{validUrlQueryChars}*#{validUrlQueryEndingChars})?))",{validUrlPrecedingChars:j,validDomain:D,validPortNumber:_,validUrlPath:T,validUrlQueryChars:U,validUrlQueryEndingChars:A},"gi"),O=n(/(?:(?:[-a-z0-9#{latinAccentChars}]+)\.)+(?:#{validGTLD}|#{validCCTLD}|#{validPunycode})/gi,{latinAccentChars:C,validGTLD:c,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 i=n+t.length,c=i+s.length+1;e.push({hashtag:s,indices:[i,c]})})),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(O))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 ia(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 ca=function(a,e=na){if(!a||(e.extractUrlsWithoutProtocol?!a.match(/\./):!a.match(/:/)))return[];const t=[];while(H.exec(a)){const a=RegExp.$2;let u=RegExp.$3;const s=RegExp.$4,n=RegExp.$5,r=RegExp.$7;let d=H.lastIndex;const i=d-u.length;if(ia(u,s||sa,n))if(s)t.push({url:u,indices:[i,d]});else{if(!e.extractUrlsWithoutProtocol||a.match(da))continue;let s=null,c=0;if(n.replace(O,(function(a){const e=n.indexOf(a,c);c=e+a.length,s={url:a,indices:[i+e,i+c]},t.push(s)})),null==s)continue;r&&(s.url=u.replace(n,s.url),s.indices[1]=d)}}return t};var oa=ca,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 ga(a,e){return a.replace(/#\{(\w+)\}/g,(function(a,t){return e[t]||""}))}const ba={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]||(ba[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 ga("#{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 La(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 Ha(a,e){return Na(a,e)}function Oa(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:"content-container"},[u("div",{staticClass:"mb-md"},[u("h4",[a._v("HTML with links:")]),u("div",{staticClass:"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:"text-center"},[u("div",{},[a._v(" "+a._s(a.$autoLink(a.text,a.options)))])])]),u("div",{staticClass:"mb-md"},[u("h4",[a._v("Model text:")]),u("div",{},[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=[],ie=(t("498a"),t("1487")),ce=t.n(ie),oe={name:"CodeSnippet",props:{code:String,lang:String},computed:{result:function(){var a=ce.a.highlight(this.lang,this.code.trim());return a.value},lineCount:function(){for(var a=this.result,e=0,t=0;t\n"),be="\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/*\nautoHighlighted:\nmy @username, my \n#hashtag and myurl.com\n*/\n',ye="\n\n\n