lakelib 0.1.14 → 0.1.16

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 CHANGED
@@ -6,13 +6,13 @@
6
6
 
7
7
  ---
8
8
 
9
- 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.
9
+ Lake is a rich text editor for the web. It aims to be a user-friendly editor, and provides an easy-to-use programming interface to allow further extension.
10
10
 
11
11
  [Examples](https://lakejs.org/examples/) · [Getting started](https://lakejs.org/guide/) · [Reference](https://lakejs.org/reference/)
12
12
 
13
13
  ## Development
14
14
 
15
- 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.
15
+ To build Lake or modify its source code, you need to download the repository and start a development server that includes an HTTP service and real-time bundling.
16
16
 
17
17
  ``` bash
18
18
  # Clone the repository
@@ -23,12 +23,22 @@ pnpm install
23
23
  pnpm dev
24
24
  ```
25
25
 
26
- You can now view all demos by visiting `http://localhost:8080/examples/`.
26
+ You can now view all the demos by visiting `http://localhost:8080/examples/`.
27
27
 
28
28
  ## Running tests
29
29
 
30
- 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.
30
+ Lake depends on a lot of browser APIs and ao needs a real browser environment for running the test cases. You can run all tests visibly by visiting `http://localhost:8080/tests/`, or execute the `pnpm test` command to run the tests in headless mode.
31
31
 
32
32
  ## License
33
33
 
34
- [MIT](https://github.com/lakejs/lake/blob/main/LICENSE)
34
+ Lake is released under the [MIT](https://github.com/lakejs/lake/blob/main/LICENSE) license. For the licenses of its dependencies, see the following table:
35
+
36
+ | Package | License |
37
+ | ------------- | ------------- |
38
+ | [codemirror](https://github.com/codemirror/dev) | MIT |
39
+ | [debounce](https://github.com/sindresorhus/debounce) | MIT |
40
+ | [eventemitter3](https://github.com/primus/eventemitter3) | MIT |
41
+ | [fast-deep-equal](https://github.com/epoberezkin/fast-deep-equal) | MIT |
42
+ | [photoswipe](https://github.com/dimsemenov/Photoswipe) | MIT |
43
+ | [tinykeys](https://github.com/jamiebuilds/tinykeys) | MIT |
44
+ | [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) | MIT |
package/dist/lake.css CHANGED
@@ -309,7 +309,9 @@ button.lake-primary-button.lake-button-hovered {
309
309
  opacity: 0.25;
310
310
  cursor: default;
311
311
  }
312
- .lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered {
312
+ .lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered,
313
+ .lake-dropdown.lake-icon-dropdown button.lake-dropdown-title-hovered,
314
+ .lake-dropdown.lake-character-dropdown button.lake-dropdown-title-hovered {
313
315
  background-color: var(--background-hover-color);
314
316
  }
315
317
  .lake-dropdown button.lake-dropdown-title.lake-dropdown-title-no-down {
@@ -379,12 +381,17 @@ button.lake-primary-button.lake-button-hovered {
379
381
  top: auto;
380
382
  bottom: 30px;
381
383
  }
384
+ .lake-dropdown .lake-dropdown-menu.lake-dropdown-menu-with-scroll {
385
+ overflow-y: scroll;
386
+ scrollbar-width: thin;
387
+ }
382
388
  .lake-dropdown .lake-dropdown-menu li {
383
389
  display: flex;
384
390
  align-items: center;
385
391
  cursor: pointer;
386
392
  margin: 0;
387
393
  }
394
+ /* list type */
388
395
  .lake-dropdown .lake-list-dropdown-menu li {
389
396
  padding: 6px 24px 6px 10px;
390
397
  }
@@ -414,10 +421,68 @@ button.lake-primary-button.lake-button-hovered {
414
421
  margin-left: 10px;
415
422
  white-space: nowrap;
416
423
  }
424
+ /* icon type */
425
+ .lake-dropdown .lake-icon-dropdown-menu {
426
+ flex-wrap: wrap;
427
+ justify-content: center;
428
+ }
429
+ .lake-dropdown .lake-icon-dropdown-menu li {
430
+ padding: 0;
431
+ border-radius: 2px;
432
+ }
433
+ .lake-dropdown .lake-icon-dropdown-menu li.lake-dropdown-item-hovered {
434
+ background-color: var(--background-hover-color);
435
+ }
436
+ .lake-dropdown .lake-icon-dropdown-menu li.lake-dropdown-item-selected {
437
+ background-color: var(--background-active-color);
438
+ }
439
+ .lake-dropdown .lake-icon-dropdown-menu li .lake-dropdown-menu-check {
440
+ display: none;
441
+ }
442
+ .lake-dropdown .lake-icon-dropdown-menu li .lake-dropdown-menu-icon {
443
+ line-height: 0;
444
+ margin: 5px;
445
+ }
446
+ .lake-dropdown .lake-icon-dropdown-menu li .lake-dropdown-menu-icon svg,
447
+ .lake-dropdown .lake-icon-dropdown-menu li .lake-dropdown-menu-icon img {
448
+ width: 32px;
449
+ height: 32px;
450
+ }
451
+ .lake-dropdown .lake-icon-dropdown-menu li .lake-dropdown-menu-text {
452
+ display: none;
453
+ }
454
+ /* character type */
455
+ .lake-dropdown .lake-character-dropdown-menu {
456
+ flex-wrap: wrap;
457
+ justify-content: center;
458
+ }
459
+ .lake-dropdown .lake-character-dropdown-menu li {
460
+ padding: 0;
461
+ border-radius: 2px;
462
+ }
463
+ .lake-dropdown .lake-character-dropdown-menu li.lake-dropdown-item-hovered {
464
+ background-color: var(--background-hover-color);
465
+ }
466
+ .lake-dropdown .lake-character-dropdown-menu li.lake-dropdown-item-selected {
467
+ background-color: var(--background-active-color);
468
+ }
469
+ .lake-dropdown .lake-character-dropdown-menu li .lake-dropdown-menu-check {
470
+ display: none;
471
+ }
472
+ .lake-dropdown .lake-character-dropdown-menu li .lake-dropdown-menu-icon {
473
+ display: none;
474
+ }
475
+ .lake-dropdown .lake-character-dropdown-menu li .lake-dropdown-menu-text {
476
+ text-align: center;
477
+ font-size: 24px;
478
+ width: 42px;
479
+ height: 42px;
480
+ line-height: 42px;
481
+ }
482
+ /* color type */
417
483
  .lake-dropdown .lake-color-dropdown-menu {
418
484
  flex-wrap: wrap;
419
485
  justify-content: center;
420
- width: 296px;
421
486
  }
422
487
  .lake-dropdown .lake-color-dropdown-menu li {
423
488
  position: relative;
@@ -851,57 +916,6 @@ lake-box[name="hr"] .lake-box-focused .lake-hr {
851
916
  border-top: 1px solid var(--border-color);
852
917
  }
853
918
 
854
- .lake-video {
855
- position: relative;
856
- font-size: 14px;
857
- font-weight: normal;
858
- line-height: 0;
859
- box-sizing: content-box;
860
- border: 1px solid transparent;
861
- }
862
- lake-box[name="video"] .lake-box-hovered .lake-resizer {
863
- display: block;
864
- }
865
- .lake-video .lake-video-form {
866
- box-sizing: content-box;
867
- padding: 16px;
868
- line-height: normal;
869
- border: 1px solid var(--box-border-color);
870
- border-radius: 4px;
871
- }
872
- .lake-video input[type="text"] {
873
- box-sizing: border-box;
874
- font-family: var(--font-family);
875
- font-size: 14px;
876
- color: var(--text-color);
877
- border-radius: 5px;
878
- border: 1px solid var(--input-border-color);
879
- padding: 4px 10px;
880
- width: 100%;
881
- }
882
- .lake-video input[type="text"]:hover {
883
- border: 1px solid var(--input-border-hover-color);
884
- }
885
- .lake-video input[type="text"]:focus-visible {
886
- outline: var(--input-outline);
887
- outline-offset: -2px;
888
- }
889
- .lake-video .lake-row {
890
- padding-bottom: 8px;
891
- }
892
- .lake-video .lake-desc-row {
893
- padding-top: 8px;
894
- padding-bottom: 16px;
895
- color: var(--secondary-text-color);
896
- }
897
- .lake-video .lake-button-row {
898
- padding-top: 16px;
899
- }
900
- .lake-video .lake-button-row button {
901
- box-sizing: border-box;
902
- width: 100%;
903
- }
904
-
905
919
  /* CodeMirror */
906
920
  .cm-editor {
907
921
  font-size: 14px;
@@ -958,9 +972,6 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
958
972
  top: 24px;
959
973
  left: auto;
960
974
  right: 0;
961
- overflow-y: scroll;
962
- scrollbar-width: thin;
963
- height: 200px;
964
975
  }
965
976
  .lake-code-block-error {
966
977
  font-size: 14px;
@@ -1072,6 +1083,57 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
1072
1083
  cursor: pointer;
1073
1084
  }
1074
1085
 
1086
+ .lake-video {
1087
+ position: relative;
1088
+ font-size: 14px;
1089
+ font-weight: normal;
1090
+ line-height: 0;
1091
+ box-sizing: content-box;
1092
+ border: 1px solid transparent;
1093
+ }
1094
+ lake-box[name="video"] .lake-box-hovered .lake-resizer {
1095
+ display: block;
1096
+ }
1097
+ .lake-video .lake-video-form {
1098
+ box-sizing: content-box;
1099
+ padding: 16px;
1100
+ line-height: normal;
1101
+ border: 1px solid var(--box-border-color);
1102
+ border-radius: 4px;
1103
+ }
1104
+ .lake-video input[type="text"] {
1105
+ box-sizing: border-box;
1106
+ font-family: var(--font-family);
1107
+ font-size: 14px;
1108
+ color: var(--text-color);
1109
+ border-radius: 5px;
1110
+ border: 1px solid var(--input-border-color);
1111
+ padding: 4px 10px;
1112
+ width: 100%;
1113
+ }
1114
+ .lake-video input[type="text"]:hover {
1115
+ border: 1px solid var(--input-border-hover-color);
1116
+ }
1117
+ .lake-video input[type="text"]:focus-visible {
1118
+ outline: var(--input-outline);
1119
+ outline-offset: -2px;
1120
+ }
1121
+ .lake-video .lake-row {
1122
+ padding-bottom: 8px;
1123
+ }
1124
+ .lake-video .lake-desc-row {
1125
+ padding-top: 8px;
1126
+ padding-bottom: 16px;
1127
+ color: var(--secondary-text-color);
1128
+ }
1129
+ .lake-video .lake-button-row {
1130
+ padding-top: 16px;
1131
+ }
1132
+ .lake-video .lake-button-row button {
1133
+ box-sizing: border-box;
1134
+ width: 100%;
1135
+ }
1136
+
1075
1137
  .lake-file {
1076
1138
  position: relative;
1077
1139
  font-size: 16px;
@@ -1137,6 +1199,23 @@ lake-box[name="file"] .lake-box-focused .lake-file {
1137
1199
  color: var(--error-color);
1138
1200
  }
1139
1201
 
1202
+ .lake-emoji {
1203
+ line-height: 0;
1204
+ box-sizing: content-box;
1205
+ border: 1px solid transparent;
1206
+ border-radius: 2px;
1207
+ }
1208
+ .lake-emoji img {
1209
+ border: 0;
1210
+ border-radius: 2px;
1211
+ width: 32px;
1212
+ height: 32px;
1213
+ }
1214
+ lake-box[name="emoji"] .lake-box-focused .lake-emoji {
1215
+ border-color: var(--selection-background-color);
1216
+ background-color: var(--selection-background-color);
1217
+ }
1218
+
1140
1219
  .lake-toolbar {
1141
1220
  font-family: var(--font-family);
1142
1221
  font-size: 14px;