Skip to content

Commit 7ebd9da

Browse files
authored
docs: fix some typos
1 parent 85309b2 commit 7ebd9da

File tree

1 file changed

+10
-5
lines changed

1 file changed

+10
-5
lines changed

README.md

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ npm install multiple-select-vanilla
3434

3535
## Basic Usage
3636

37-
#### 1. From a native `<select>`
37+
#### 1. from a native `<select>`
3838

3939
```html
4040
<select class="multiple-select full-width" data-test="select1">
@@ -53,7 +53,7 @@ import { multipleSelect } from 'multiple-select-vanilla';
5353
const ms = multipleSelect('.multiple-select');
5454
```
5555

56-
##### 2. From data
56+
##### 2. or from data
5757

5858
```ts
5959
import { multipleSelect } from 'multiple-select-vanilla';
@@ -82,7 +82,7 @@ Changes and new options:
8282
- dropped jQuery requirement and rewrote with browser native code.
8383
- rewritten in TypeScript to also provide typings support (`d.ts`)
8484
- make the lib CSP compliant (see [CSP Compliance](#csp-compliance) section below)
85-
- add E2E tests, with Playwright, for all existing examples (over 65 of them)
85+
- add E2E tests, with Playwright, for all existing examples (over 80 of them)
8686
- revamped the UI in v3.x to give it a more Modern Look:
8787
- improved CSS styling by using SVG icons (CSS/SASS variables are also availables)
8888
- new Dark Mode
@@ -94,7 +94,7 @@ Changes and new options:
9494
- `autoAdjustDropWidthByTextSize` automatically set the drop width size by reading the widest list option width
9595
- `dataTest` will add a `data-test` attribute on the `.ms-parent` and `.ms-drop` divs for easier E2E testing
9696
- `useSelectOptionLabel` will use the `<option label="">` which can be used to display shorter text of selected options.
97-
- example: display "1,3" as label instead of "January,March" (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options31))
97+
- example: display `"1,3"` as label instead of `"January,March"` (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options31))
9898
- `useSelectOptionLabelToHtml` similar to `useSelectOptionLabel` but also renders HTML.
9999
- `renderOptionLabelAsHtml` will render selected options as HTML code (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options27))
100100
- `sanitizer` can be used to sanitize HTML code and prevent XSS cross-site scripting attacks (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options32)).
@@ -110,7 +110,7 @@ Changes and new options:
110110
- `lazyData` provide a function callback that will return a Promise with data collection (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options42))
111111

112112
## CSP Compliance
113-
The library is now CSP (Content Security Policy) compliant, however there are some exceptions to be aware of. When using any HTML strings as template (when using `textTemplate`, `labelTemplate`, `renderOptionLabelAsHtml` or `useSelectOptionLabelToHtml`), you will not be fully compliant unless you return [`TrustedHTML`](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML). You can achieve this by using the `sanitizer` method in combo with an external library like [DOMPurify](https://github.com/cure53/DOMPurify) (recommended) to return `TrustedHTML` as shown below and with that in place you will be CSP compliant.
113+
The library is now CSP (Content Security Policy) compliant, there are however some exceptions to be aware of. When using any HTML strings as template (when using `textTemplate`, `labelTemplate`, `renderOptionLabelAsHtml` or `useSelectOptionLabelToHtml`), you will not be fully compliant unless you return [`TrustedHTML`](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML). You can achieve this by using the `sanitizer` method in combo with an external library like [DOMPurify](https://github.com/cure53/DOMPurify) (recommended) to return `TrustedHTML` as shown below and with that in place you will be CSP compliant.
114114

115115
```typescript
116116
import DOMPurify from 'dompurify';
@@ -127,13 +127,17 @@ const ms1 = multipleSelect('#select1', {
127127
]
128128
});
129129
```
130+
130131
with this code in place, we can now use the following CSP meta tag (which is what we use in the demo [index.html](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/demo/index.html#L7))
132+
131133
```html
132134
<meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'self' data:; img-src * 'self' data: https:; require-trusted-types-for 'script'; trusted-types dompurify">
133135
```
136+
134137
> **Note** that in our demo we are actually adding `unsafe-inline` simply because we are using Vite (which is not CSP compliant in Dev mode), but the library should work nonetheless without `unsafe-inline`.
135138
136139
### Installation / Structure
140+
137141
There are multiple ways to install and use the library, you can see below the folder structure of the distribution files
138142
1. `dist/browser`: Standalone build which assigns `multipleSelect` on the `window.multipleSelect` object
139143
- browser standalone means that you can simply load it with `<script></script>` and then `multipleSelect('#mySelect')`
@@ -157,6 +161,7 @@ dist/
157161
```
158162

159163
### Used by
164+
160165
This fork was created mostly to drop jQuery, and it is used by a few other Open Source projects of mine that I also maintain:
161166
- [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid)
162167
- [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid)

0 commit comments

Comments
 (0)