├── .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 |
32 |
You can install via npm or yarn:
9 | 10 |And then import the component in your app:
13 | 14 |Let's create our first component:
19 | 20 |As you can see, the component accepts some props:
23 | 24 |Prop | 28 |Type | 29 |Description | 30 ||
---|---|---|---|
35 |
36 | extractUrlsWithoutProtocol
37 |
38 | |
39 |
40 |
41 | Boolean
42 |
43 | |
44 |
45 |
46 | As the name says, when active, the compoponet will try to match
47 | URLs even when a protocol (http://, https://) is not found.
48 | Defaults to true
49 |
50 | |
51 | |
55 |
56 | caretColor
57 |
58 | |
59 |
60 |
61 | String
62 |
63 | |
64 |
65 |
66 | A valid HEX color (eg. #ccc, #ff4545).
67 |
68 | |
69 | |
73 |
74 | placeholder
75 |
76 | |
77 |
78 |
79 | String
80 |
81 | |
82 |
83 |
84 | A placeholder to show when no text is entered.
85 |
86 | |
87 | |
91 |
92 | usernameClass
93 |
94 | |
95 |
96 |
97 | String
98 |
99 | |
100 |
101 |
102 | The CSS class(es) that will be added to a @username match.
103 |
104 | |
105 | |
109 |
110 | hashtagClass
111 |
112 | |
113 |
114 |
115 | String
116 |
117 | |
118 |
119 |
120 | The CSS class(es) that will be added to a #hashtag match.
121 |
122 | |
123 | |
127 |
128 | urlClass
129 |
130 | |
131 |
132 |
133 | String
134 |
135 | |
136 |
137 |
138 | The CSS class(es) that will be added to a URL match.
139 |
140 | |
141 |
146 | The exported component (vue-highlights) renders a text 147 | input that highlights all username, hashtag and URL matches. In order to 148 | work with this input some CSS classes should be attended, here's an 149 | example: 150 |
151 | 152 |With this we should get a working example.
155 | 156 |As you can see when we first imported the package, 2 functions are also 157 | exported: autoLink and autoHighlight. 158 |
159 |160 | Both return a String value which contains our highlighted text. 161 | autoLink returns the matches found between anchor tags for 162 | links. 163 | autoHighlight returns the matches found between span tags for 164 | highlight only. 165 |
166 |Now we can render our linked/highlighted text anywhere we like:
171 | 172 |