Skip to content

Commit 6c7289f

Browse files
TechQueryTechQuery
committed
[add] HTML Editor component
[optimize] upgrade Upstream packages
1 parent b511f0f commit 6c7289f

File tree

13 files changed

+179
-72
lines changed

13 files changed

+179
-72
lines changed

‎document/source/components/Collapse.mdx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ Collapsing an element will animate the `height` from its current value to `0`.
2020
In addition, `<collapse-box />` uses [`ResizeObserver`][1] to detect **Content resizing**, so a polyfill may be required:
2121

2222
```HTML
23-
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=ResizeObserver"></script>
23+
<script
24+
crossorigin
25+
src="https://polyfill.app/api/polyfill?features=resize-observer"
26+
></script>
2427
```
2528

2629
## Example

‎document/source/components/Dialog.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ import { Example } from '../../../source/component/Example';
2525
```HTML
2626
<link
2727
rel="stylesheet"
28-
href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.3/dist/dialog-polyfill.css"
28+
href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.4/dist/dialog-polyfill.css"
2929
/>
30-
<script src="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.3/dist/dialog-polyfill.js"></script>
30+
<script src="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.4/dist/dialog-polyfill.js"></script>
3131
```
3232

3333
Keep reading for demos and usage guidelines.

‎document/source/components/FAIcon.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ All you need to do is include a single line of HTML:
1818
```HTML
1919
<link
2020
rel="stylesheet"
21-
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14.0/css/all.min.css"
21+
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css"
2222
/>
2323
```
2424

‎document/source/components/FormField.mdx‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { Button } from 'boot-cell/source/Form/Button';
1111
import { Form } from 'boot-cell/source/Form/Form';
1212
import { Field } from 'boot-cell/source/Form/Field';
1313
import { InputGroup } from 'boot-cell/source/Form/InputGroup';
14+
import { ScoreRange } from 'boot-cell/source/Form/ScoreRange';
15+
import { FileInput } from 'boot-cell/source/Form/FileInput';
1416

1517
import { Example } from '../../../source/component/Example';
1618

@@ -1422,34 +1424,27 @@ render(
14221424
#### Icon mode
14231425

14241426
<Example>
1425-
<FormField
1426-
type="range"
1427-
label="Evaluation"
1428-
max={5}
1429-
emptyIcon="☆"
1430-
fullIcon="★"
1431-
size="lg"
1432-
/>
1427+
<FormField label="Evaluation">
1428+
<ScoreRange />
1429+
</FormField>
14331430
</Example>
14341431

14351432
```TSX
14361433
import { render, createCell } from 'web-cell';
14371434
import { FormField } from 'boot-cell/source/Form/FormField';
1435+
import { ScoreRange } from 'boot-cell/source/Form/ScoreRange';
14381436

14391437
render(
1440-
<FormField
1441-
type="range"
1442-
label="Evaluation"
1443-
max={5}
1444-
emptyIcon="☆"
1445-
fullIcon="★"
1446-
size="lg"
1447-
/>
1438+
<FormField label="Evaluation">
1439+
<ScoreRange />
1440+
</FormField>
14481441
);
14491442
```
14501443

14511444
### File browser
14521445

1446+
#### Regular mode
1447+
14531448
<Example>
14541449
<Field type="file" />
14551450
</Example>
@@ -1467,6 +1462,21 @@ We hide the default file `<input>` via `opacity` and instead style the `<label>`
14671462
The button is generated and positioned with `::after`.
14681463
Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
14691464

1465+
#### Preview mode
1466+
1467+
<Example>
1468+
<FileInput />
1469+
</Example>
1470+
1471+
```TSX
1472+
import { render, createCell } from 'web-cell';
1473+
import { FileInput } from 'boot-cell/source/Form/FileInput';
1474+
1475+
render(
1476+
<FileInput />
1477+
);
1478+
```
1479+
14701480
### Floating label
14711481

14721482
`labelFloat` mode is imported from [Floating labels][10] of Bootstrap.

‎document/source/components/HTMLEditor.mdx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
layout: docs
3+
title: HTML editor
4+
description:
5+
group: Components
6+
---
7+
8+
import { HTMLEditor } from 'boot-cell/source/Form/HTMLEditor';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
This component is built on the top of [Quill][1], these dependencies below should be installed:
13+
14+
```Shell
15+
npm install quill quill-image-uploader
16+
```
17+
18+
## Bubble theme
19+
20+
<Example>
21+
<HTMLEditor>WebCell</HTMLEditor>
22+
</Example>
23+
24+
```TSX
25+
import { render, createCell } from 'web-cell';
26+
import { HTMLEditor } from 'boot-cell/source/Form/HTMLEditor';
27+
28+
render(
29+
<HTMLEditor>WebCell</HTMLEditor>
30+
);
31+
```
32+
33+
## Snow theme
34+
35+
<Example>
36+
<HTMLEditor
37+
theme="snow"
38+
upload={() =>
39+
new Promise(resolve =>
40+
setTimeout(
41+
() =>
42+
resolve('https://web-cell.dev/WebCell-1.fb612fdb.png'),
43+
1000
44+
)
45+
)
46+
}
47+
>
48+
WebCell
49+
</HTMLEditor>
50+
</Example>
51+
52+
```TSX
53+
import { render, createCell } from 'web-cell';
54+
import { HTMLEditor } from 'boot-cell/source/Form/HTMLEditor';
55+
56+
render(
57+
<HTMLEditor
58+
theme="snow"
59+
upload={() =>
60+
new Promise(resolve =>
61+
setTimeout(
62+
() =>
63+
resolve('https://web-cell.dev/WebCell-1.fb612fdb.png'),
64+
1000
65+
)
66+
)
67+
}
68+
>
69+
WebCell
70+
</HTMLEditor>
71+
);
72+
```
73+
74+
[1]: http://quilljs.com/

‎document/source/components/Icon.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: docs
33
title: Icon
4-
description: Wrapper component for BootStrap Icon v1 (SVG sprite)
4+
description: Wrapper component for BootStrap Icon v1.2+ (Web font)
55
group: Components
66
---
77

@@ -14,13 +14,13 @@ This component is built on [Web font of BootStrap Icon 1.2+][1], so make sure to
1414
```HTML
1515
<link
1616
rel="stylesheet"
17-
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.1/font/bootstrap-icons.css"
17+
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.2/font/bootstrap-icons.css"
1818
/>
1919
```
2020

2121
## Basic usage
2222

23-
`<Icon />` will render a SVG with `16px` width & height defaultly.
23+
`<Icon />` will render a Web font with `16px` width & height defaultly.
2424

2525
<Example>
2626
<Icon name="bootstrap" />
@@ -37,18 +37,18 @@ render(
3737

3838
## Sizing
3939

40-
Assign `px` value to `width` or `height` to resize the SVG.
40+
Resize a Web font with `size` property.
4141

4242
<Example>
43-
<Icon name="bootstrap" width={32} />
43+
<Icon name="bootstrap" size={2} />
4444
</Example>
4545

4646
```TSX
4747
import { render, createCell } from 'web-cell';
4848
import { Icon } from 'boot-cell/source/Reminder/Icon';
4949

5050
render(
51-
<Icon name="bootstrap" width={32} />
51+
<Icon name="bootstrap" size={2} />
5252
);
5353
```
5454

‎document/source/components/MarkdownEditor.mdx‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,59 @@ group: Components
66
---
77

88
import { MarkdownEditor } from 'boot-cell/source/Form/MarkdownEditor';
9+
import { FileUploader } from 'boot-cell/source/Form/FileUploader';
10+
import { Button } from 'boot-cell/source/Form/Button';
911

1012
import { Example } from '../../../source/component/Example';
1113

12-
This component is built on the top of [MarkdownIME][1], these dependencies below should be installed:
14+
This component is built on the top of [MarkdownIME][1] & [GitHub Markdown CSS][2],
15+
these dependencies below should be installed:
1316

1417
```Shell
1518
npm install markdown-ime marked turndown turndown-plugin-gfm
1619
```
1720

18-
and a [CSS library][2] is needed, too:
19-
20-
```HTML
21-
<link
22-
rel="stylesheet"
23-
href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css"
24-
/>
25-
```
21+
You can **paste** or **drop** images into the editor, and **upload** them on `<form />` submitting.
2622

2723
<Example>
28-
<MarkdownEditor value="# WebCell" />
24+
<form onSubmit={event => event.preventDefault()}>
25+
<FileUploader
26+
transport={() => ({
27+
path: Promise.resolve(
28+
'https://web-cell.dev/WebCell-1.fb612fdb.png'
29+
)
30+
})}
31+
>
32+
<MarkdownEditor value="WebCell" />
33+
</FileUploader>
34+
<Button type="submit" color="success" className="my-3">
35+
Submit
36+
</Button>
37+
</form>
2938
</Example>
3039

3140
```TSX
3241
import { render, createCell } from 'web-cell';
3342
import { MarkdownEditor } from 'boot-cell/source/Form/MarkdownEditor';
43+
import { FileUploader } from 'boot-cell/source/Form/FileUploader';
44+
import { Button } from 'boot-cell/source/Form/Button';
3445

3546
render(
36-
<MarkdownEditor value="# WebCell" />
47+
<form onSubmit={event => event.preventDefault()}>
48+
<FileUploader
49+
transport={() => ({
50+
path: Promise.resolve(
51+
'https://web-cell.dev/WebCell-1.fb612fdb.png'
52+
)
53+
})}
54+
>
55+
<MarkdownEditor value="WebCell" />
56+
</FileUploader>
57+
58+
<Button type="submit" color="success" className="my-3">
59+
Submit
60+
</Button>
61+
</form>
3762
);
3863
```
3964

‎document/source/components/NavBar.mdx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@ Here’s what you need to know before getting started with the navbar:
3030
In addition, `<NavBar />` uses [`ResizeObserver`][4] to detect **Viewport resizing**, so a polyfill may be required:
3131

3232
```HTML
33-
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=ResizeObserver"></script>
33+
<script
34+
crossorigin
35+
src="https://polyfill.app/api/polyfill?features=resize-observer"
36+
></script>
3437
```
3538

3639
Read on for an example and list of supported sub-components.

‎document/source/components/ShareBar.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ these dependencies below should be installed:
1515
```HTML
1616
<link
1717
rel="stylesheet"
18-
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14.0/css/all.min.css"
18+
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css"
1919
/>
20-
<script src="https://cdn.jsdelivr.net/npm/share-api-polyfill@1.0.18/dist/share-min.js"></script>
20+
<script src="https://cdn.jsdelivr.net/npm/share-api-polyfill@1.0.20/dist/share-min.js"></script>
2121
```
2222

2323
```Shell

‎document/source/components/TabView.mdx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,7 @@ import { Icon } from 'boot-cell/source/Reminder/Icon';
1616

1717
import { Example } from '../../../source/component/Example';
1818

19-
Tab view is built on CSS of Bootstrap & [bs-stepper][1], so don't forget to include the extra style sheet:
20-
21-
```HTML
22-
<link
23-
rel="stylesheet"
24-
href="https://cdn.jsdelivr.net/npm/bs-stepper@1.7.0/dist/css/bs-stepper.min.css"
25-
/>
26-
```
19+
Tab view is built on CSS of Bootstrap & [bs-stepper][1].
2720

2821
## Tabs mode
2922

0 commit comments

Comments
 (0)