lakelib 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -22
- package/dist/lake.css +50 -25
- package/dist/lake.min.js +7 -7
- package/dist/lake.min.js.map +1 -1
- package/lib/lake.css +50 -25
- package/lib/lake.js +11 -4
- package/lib/lake.js.map +1 -1
- package/package.json +21 -36
- package/dist/codemirror.min.js +0 -1
package/README.md
CHANGED
|
@@ -1,21 +1,17 @@
|
|
|
1
|
-
> This project is not complete yet, please DO NOT integrate it into your production.
|
|
2
|
-
|
|
3
1
|
# Lake
|
|
4
2
|
|
|
5
3
|
Lake is a rich text editor for the web. It has a good user experience and provides easy-to-use programming interface to allow further extension.
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
#### Downloading Lake from CDN
|
|
5
|
+
## Downloading Lake from CDN
|
|
10
6
|
|
|
11
7
|
Compressed copies of Lake files are available, you can download them from jsDelivr or UNPKG.
|
|
12
8
|
|
|
13
|
-
* jsDelivr: https://www.jsdelivr.com/package/npm/lakelib
|
|
14
|
-
* UNPKG: https://unpkg.com/browse/lakelib
|
|
9
|
+
* jsDelivr: https://www.jsdelivr.com/package/npm/lakelib
|
|
10
|
+
* UNPKG: https://unpkg.com/browse/lakelib/
|
|
15
11
|
|
|
16
|
-
Note: `lake.min.js` is not built with CodeMirror, so if you need the code block feature, addtioanaly including `codemirror.min.js` to your page is needed. But if you do not need it, there is no need to include external CodeMirror file. To find out more,
|
|
12
|
+
Note: `lake.min.js` is not built with CodeMirror, so if you need the code block feature, addtioanaly including `codemirror.min.js` to your page is needed. But if you do not need it, there is no need to include external CodeMirror file. To find out more, see [IIFE example](https://github.com/lakejs/lake/blob/main/examples/iife.html) and [Rollup configuration](https://github.com/lakejs/lake/blob/main/rollup.config.mjs).
|
|
17
13
|
|
|
18
|
-
|
|
14
|
+
## Downloading Lake using npm
|
|
19
15
|
|
|
20
16
|
Lake is registered as a package on npm. You can install the latest version of Lake with the following npm command.
|
|
21
17
|
|
|
@@ -23,12 +19,12 @@ Lake is registered as a package on npm. You can install the latest version of La
|
|
|
23
19
|
npm install lakelib
|
|
24
20
|
```
|
|
25
21
|
|
|
26
|
-
|
|
22
|
+
## Quick start with CDN
|
|
27
23
|
|
|
28
24
|
First, add the following lines of code in the `<head>` of an HTML page.
|
|
29
25
|
|
|
30
26
|
```html
|
|
31
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lakelib@latest/dist/lake.css" />
|
|
27
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lakelib@latest/dist/lake.min.css" />
|
|
32
28
|
<script src="https://cdn.jsdelivr.net/npm/lakelib@latest/dist/lake.min.js"></script>
|
|
33
29
|
```
|
|
34
30
|
|
|
@@ -54,29 +50,54 @@ const editor = new Lake.Editor({
|
|
|
54
50
|
editor.render();
|
|
55
51
|
```
|
|
56
52
|
|
|
57
|
-
|
|
53
|
+
## Quick start with npm
|
|
54
|
+
|
|
55
|
+
First, in the HTML page add the following HTML code that will serve as a placeholder for an editor instance.
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<div class="lake-editor">
|
|
59
|
+
<div class="lake-toolbar-root"></div>
|
|
60
|
+
<div class="lake-root"></div>
|
|
61
|
+
</div>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Then, call the following JavaScript code to render the editor.
|
|
65
|
+
|
|
66
|
+
```js
|
|
67
|
+
import 'lakelib/lib/lake.css';
|
|
68
|
+
import { Editor, Toolbar } from 'lakelib';
|
|
69
|
+
|
|
70
|
+
const toolbar = new Toolbar({
|
|
71
|
+
root: '.lake-toolbar-root',
|
|
72
|
+
});
|
|
73
|
+
const editor = new Editor({
|
|
74
|
+
root: '.lake-root',
|
|
75
|
+
toolbar,
|
|
76
|
+
});
|
|
77
|
+
editor.render();
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Development
|
|
58
81
|
|
|
59
82
|
To build Lake or change source code, you need to download the repository and start a development server that contains an HTTP service and real-time bundling.
|
|
60
83
|
|
|
61
84
|
``` bash
|
|
62
|
-
#
|
|
85
|
+
# Clone the repository
|
|
63
86
|
git clone https://github.com/lakejs/lake.git
|
|
64
|
-
#
|
|
65
|
-
cd lake
|
|
66
|
-
# install all dependencies
|
|
87
|
+
# Install dependencies
|
|
67
88
|
pnpm install
|
|
68
|
-
#
|
|
89
|
+
# Build CodeMirror
|
|
69
90
|
pnpm build:codemirror
|
|
70
|
-
#
|
|
91
|
+
# Start a local server
|
|
71
92
|
pnpm dev
|
|
72
93
|
```
|
|
73
94
|
|
|
74
95
|
You can now view all demos by visiting `http://localhost:8080/examples/`.
|
|
75
96
|
|
|
76
|
-
|
|
97
|
+
## Running tests
|
|
77
98
|
|
|
78
|
-
Lake uses a lot of browser APIs and therefore it requires a real browser environment to run the tests. You can open `http://localhost:8080/tests/` to run all test cases visibly, or execute `pnpm test` command in your console to run the tests in headless mode.
|
|
99
|
+
Lake uses a lot of browser APIs and therefore it requires a real browser environment to run the tests. You can open `http://localhost:8080/tests/` to run all test cases visibly, or execute `pnpm test` command in your console to run the tests in headless mode.
|
|
79
100
|
|
|
80
|
-
|
|
101
|
+
## License
|
|
81
102
|
|
|
82
|
-
[MIT](https://github.com/lakejs/lake/blob/
|
|
103
|
+
[MIT](https://github.com/lakejs/lake/blob/main/LICENSE)
|
package/dist/lake.css
CHANGED
|
@@ -35,7 +35,10 @@
|
|
|
35
35
|
.lake-container {
|
|
36
36
|
font-family: var(--font-family);
|
|
37
37
|
font-size: 16px;
|
|
38
|
+
font-weight: normal;
|
|
39
|
+
line-height: normal;
|
|
38
40
|
color: var(--text-color);
|
|
41
|
+
background-color: #fff;
|
|
39
42
|
padding: 16px 24px;
|
|
40
43
|
}
|
|
41
44
|
.lake-container:focus {
|
|
@@ -91,10 +94,11 @@
|
|
|
91
94
|
background-color: #0000000a;
|
|
92
95
|
}
|
|
93
96
|
|
|
94
|
-
.lake-button {
|
|
97
|
+
button.lake-button {
|
|
98
|
+
box-sizing: content-box;
|
|
95
99
|
border-radius: 5px;
|
|
96
100
|
border: 0;
|
|
97
|
-
font-family:
|
|
101
|
+
font-family: Arial;
|
|
98
102
|
font-size: 14px;
|
|
99
103
|
color: var(--text-color);
|
|
100
104
|
background-color: #fff;
|
|
@@ -104,41 +108,42 @@
|
|
|
104
108
|
cursor: pointer;
|
|
105
109
|
user-select: none;
|
|
106
110
|
}
|
|
107
|
-
.lake-button:focus-visible {
|
|
111
|
+
button.lake-button:focus-visible {
|
|
108
112
|
outline: var(--button-outline);
|
|
109
113
|
}
|
|
110
|
-
.lake-button[disabled] {
|
|
114
|
+
button.lake-button[disabled] {
|
|
111
115
|
opacity: 0.25;
|
|
112
116
|
cursor: default;
|
|
113
117
|
}
|
|
114
|
-
.lake-button svg {
|
|
118
|
+
button.lake-button svg {
|
|
119
|
+
display: inline-block;
|
|
115
120
|
width: 16px;
|
|
116
121
|
height: 16px;
|
|
117
122
|
margin: 6px;
|
|
118
123
|
}
|
|
119
|
-
.lake-icon-button.lake-button-hovered {
|
|
124
|
+
button.lake-icon-button.lake-button-hovered {
|
|
120
125
|
background-color: var(--background-hover-color);
|
|
121
126
|
}
|
|
122
|
-
.lake-icon-button.lake-button-selected {
|
|
127
|
+
button.lake-icon-button.lake-button-selected {
|
|
123
128
|
background-color: var(--background-active-color);
|
|
124
129
|
}
|
|
125
|
-
.lake-text-button {
|
|
130
|
+
button.lake-text-button {
|
|
126
131
|
background-color: transparent;
|
|
127
132
|
border: 1px solid var(--border-color);
|
|
128
133
|
padding: 8px 16px;
|
|
129
134
|
}
|
|
130
|
-
.lake-text-button.lake-button-hovered {
|
|
135
|
+
button.lake-text-button.lake-button-hovered {
|
|
131
136
|
background-color: var(--background-hover-color);
|
|
132
137
|
}
|
|
133
|
-
.lake-text-button.lake-button-selected {
|
|
138
|
+
button.lake-text-button.lake-button-selected {
|
|
134
139
|
background-color: var(--background-active-color);
|
|
135
140
|
}
|
|
136
|
-
.lake-text-button svg {
|
|
141
|
+
button.lake-text-button svg {
|
|
137
142
|
background-color: transparent;
|
|
138
143
|
margin: 0 6px 0 0;
|
|
139
144
|
vertical-align: middle;
|
|
140
145
|
}
|
|
141
|
-
.lake-text-button span {
|
|
146
|
+
button.lake-text-button span {
|
|
142
147
|
display: inline-block;
|
|
143
148
|
line-height: 16px;
|
|
144
149
|
vertical-align: middle;
|
|
@@ -151,30 +156,34 @@
|
|
|
151
156
|
font-size: 14px;
|
|
152
157
|
user-select: none;
|
|
153
158
|
}
|
|
154
|
-
.lake-dropdown .lake-dropdown-title {
|
|
155
|
-
|
|
156
|
-
align-items: center;
|
|
157
|
-
justify-content: space-between;
|
|
158
|
-
padding: 0;
|
|
159
|
-
margin-right: 4px;
|
|
159
|
+
.lake-dropdown button.lake-dropdown-title {
|
|
160
|
+
box-sizing: content-box;
|
|
160
161
|
border-radius: 5px;
|
|
161
162
|
border: 0;
|
|
163
|
+
font-family: Arial;
|
|
162
164
|
font-size: 14px;
|
|
165
|
+
color: var(--text-color);
|
|
163
166
|
background-color: #fff;
|
|
167
|
+
padding: 0;
|
|
168
|
+
display: flex;
|
|
169
|
+
align-items: center;
|
|
170
|
+
justify-content: space-between;
|
|
171
|
+
margin-right: 4px;
|
|
164
172
|
cursor: pointer;
|
|
165
173
|
}
|
|
166
|
-
.lake-dropdown[disabled] .lake-dropdown-title {
|
|
174
|
+
.lake-dropdown[disabled] button.lake-dropdown-title {
|
|
167
175
|
opacity: 0.25;
|
|
168
176
|
cursor: default;
|
|
169
177
|
}
|
|
170
|
-
.lake-dropdown.lake-list-dropdown .lake-dropdown-title-hovered {
|
|
178
|
+
.lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered {
|
|
171
179
|
background-color: var(--background-hover-color);
|
|
172
180
|
}
|
|
173
|
-
.lake-dropdown .lake-dropdown-title.lake-dropdown-title-no-down {
|
|
181
|
+
.lake-dropdown button.lake-dropdown-title.lake-dropdown-title-no-down {
|
|
174
182
|
margin-right: 0;
|
|
175
183
|
}
|
|
176
184
|
.lake-dropdown .lake-dropdown-text {
|
|
177
185
|
height: 16px;
|
|
186
|
+
line-height: normal;
|
|
178
187
|
margin: 6px;
|
|
179
188
|
overflow: hidden;
|
|
180
189
|
white-space: nowrap;
|
|
@@ -199,8 +208,8 @@
|
|
|
199
208
|
left: 0;
|
|
200
209
|
bottom: 0;
|
|
201
210
|
}
|
|
202
|
-
.lake-dropdown .lake-dropdown-title-no-down .lake-dropdown-icon svg,
|
|
203
|
-
.lake-dropdown .lake-dropdown-title-no-down .lake-dropdown-icon img {
|
|
211
|
+
.lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon svg,
|
|
212
|
+
.lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon img {
|
|
204
213
|
margin: 6px;
|
|
205
214
|
}
|
|
206
215
|
.lake-dropdown .lake-dropdown-down-icon {
|
|
@@ -217,6 +226,7 @@
|
|
|
217
226
|
fill: var(--secondary-text-color);
|
|
218
227
|
}
|
|
219
228
|
.lake-dropdown .lake-dropdown-menu {
|
|
229
|
+
box-sizing: content-box;
|
|
220
230
|
position: absolute;
|
|
221
231
|
top: 30px;
|
|
222
232
|
left: 0;
|
|
@@ -235,9 +245,9 @@
|
|
|
235
245
|
display: flex;
|
|
236
246
|
align-items: center;
|
|
237
247
|
cursor: pointer;
|
|
248
|
+
margin: 0;
|
|
238
249
|
}
|
|
239
250
|
.lake-dropdown .lake-list-dropdown-menu li {
|
|
240
|
-
margin: 0;
|
|
241
251
|
padding: 6px 24px 6px 10px;
|
|
242
252
|
}
|
|
243
253
|
.lake-dropdown .lake-list-dropdown-menu li.lake-dropdown-item-hovered {
|
|
@@ -308,6 +318,7 @@
|
|
|
308
318
|
}
|
|
309
319
|
.lake-dropdown .lake-color-dropdown-menu li .lake-dropdown-menu-text {
|
|
310
320
|
font-size: 0;
|
|
321
|
+
box-sizing: content-box;
|
|
311
322
|
border: 1px solid var(--background-hover-color);
|
|
312
323
|
border-radius: 2px;
|
|
313
324
|
width: 16px;
|
|
@@ -330,11 +341,18 @@
|
|
|
330
341
|
height: auto;
|
|
331
342
|
}
|
|
332
343
|
|
|
344
|
+
.lake-popup {
|
|
345
|
+
font-family: var(--font-family);
|
|
346
|
+
font-size: 14px;
|
|
347
|
+
font-weight: normal;
|
|
348
|
+
line-height: normal;
|
|
349
|
+
color: var(--text-color);
|
|
350
|
+
}
|
|
333
351
|
.lake-popup input[type="text"] {
|
|
352
|
+
box-sizing: content-box;
|
|
334
353
|
font-family: var(--font-family);
|
|
335
354
|
font-size: 14px;
|
|
336
355
|
color: var(--text-color);
|
|
337
|
-
width: 200px;
|
|
338
356
|
border-radius: 5px;
|
|
339
357
|
border: 1px solid var(--input-border-color);
|
|
340
358
|
padding: 4px 10px;
|
|
@@ -544,6 +562,7 @@
|
|
|
544
562
|
}
|
|
545
563
|
|
|
546
564
|
.lake-container table {
|
|
565
|
+
box-sizing: content-box;
|
|
547
566
|
border-collapse: collapse;
|
|
548
567
|
border: 1px solid var(--border-color);
|
|
549
568
|
margin-bottom: 8px;
|
|
@@ -917,6 +936,11 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
|
|
|
917
936
|
}
|
|
918
937
|
|
|
919
938
|
.lake-toolbar {
|
|
939
|
+
font-family: var(--font-family);
|
|
940
|
+
font-size: 14px;
|
|
941
|
+
font-weight: normal;
|
|
942
|
+
line-height: normal;
|
|
943
|
+
color: var(--text-color);
|
|
920
944
|
background-color: #fff;
|
|
921
945
|
padding: 4px;
|
|
922
946
|
display: flex;
|
|
@@ -924,6 +948,7 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
|
|
|
924
948
|
align-items: center;
|
|
925
949
|
}
|
|
926
950
|
.lake-toolbar .lake-toolbar-divider {
|
|
951
|
+
box-sizing: content-box;
|
|
927
952
|
width: 1px;
|
|
928
953
|
height: 20px;
|
|
929
954
|
margin: 0 4px;
|