lakelib 0.1.22 → 0.1.23

package/README.md

@@ -12,7 +12,7 @@ Lake is a rich text editor for the web. It aims to be a user-friendly editor, an
 
 ## Development
 
-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.
+For local development, you need to download the source code and run a development server that includes an HTTP service and real-time bundling.
 
 ``` bash
 # Clone the repository
@@ -23,15 +23,15 @@ pnpm install
 pnpm dev
 ```
 
-You can now view all the demos by visiting `http://localhost:8080/examples/`.
+You can now view the demonstration by visiting `http://localhost:8080/examples/`.
 
 ## Running tests
 
-Lake depends on a lot of browser APIs and so 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.
+Lake depends on a lot of browser APIs, so running its test cases needs a real browser environment. You can run the tests visibly by visiting `http://localhost:8080/tests/`, or execute the `pnpm test` command to run the tests in headless mode.
 
 ## License
 
-Lake is released under the [MIT](https://github.com/lakejs/lake/blob/main/LICENSE) license. The licenses of its dependencies are:
+Lake is released under the [MIT](https://github.com/lakejs/lake/blob/main/LICENSE) license. The following table is a list of the licenses for the packages that Lake depends on.
 
 | Dependency | License |
 | -------------  | ------------- |

package/dist/lake.css

@@ -45,7 +45,7 @@
   position: relative;
 }
 .lake-container {
-  box-sizing: content-box;
+  box-sizing: border-box;
   font-family: var(--font-family);
   font-size: 16px;
   font-weight: normal;
@@ -60,6 +60,11 @@
   color: inherit;
   background: var(--selection-background-color);
 }
+.lake-container *,
+.lake-container ::before,
+.lake-container ::after {
+  box-sizing: border-box;
+}
 .lake-container.lake-placeholder::before {
   position: absolute;
   top: 8px;
@@ -196,7 +201,6 @@ lake-box .lake-button-group button svg {
   top: 0;
   left: 0;
   z-index: 1;
-  box-sizing: content-box;
   border: 1px solid var(--border-color);
   border-radius: 5px;
   font-family: var(--font-family);
@@ -212,7 +216,6 @@ lake-box .lake-button-group button svg {
   align-items: center;
 }
 .lake-box-toolbar .lake-toolbar-divider {
-  box-sizing: content-box;
   width: 1px;
   height: 20px;
   margin: 0 4px;
@@ -221,7 +224,6 @@ lake-box .lake-button-group button svg {
 }
 
 button.lake-button {
-  box-sizing: content-box;
   border-radius: 5px;
   border: 0;
   font-family: Arial;
@@ -242,7 +244,8 @@ button.lake-button[disabled] {
   opacity: 0.25;
   cursor: default;
 }
-button.lake-button svg {
+button.lake-button svg,
+button.lake-button img {
   display: inline-block;
   width: 16px;
   height: 16px;
@@ -258,6 +261,7 @@ button.lake-text-button {
   background-color: transparent;
   border: 1px solid var(--border-color);
   padding: 8px 16px;
+  line-height: normal;
 }
 button.lake-text-button.lake-button-hovered {
   background-color: var(--background-hover-color);
@@ -292,7 +296,6 @@ button.lake-primary-button.lake-button-hovered {
   user-select: none;
 }
 .lake-dropdown button.lake-dropdown-title {
-  box-sizing: content-box;
   border-radius: 5px;
   border: 0;
   font-family: Arial;
@@ -552,11 +555,15 @@ button.lake-primary-button.lake-button-hovered {
   line-height: normal;
   color: var(--text-color);
 }
+.lake-popup *,
+.lake-popup ::before,
+.lake-popup ::after {
+  box-sizing: border-box;
+}
 .lake-popup button {
   box-shadow: var(--button-shadow);
 }
 .lake-popup input[type="text"] {
-  box-sizing: content-box;
   font-family: var(--font-family);
   font-size: 14px;
   color: var(--text-color);
@@ -583,7 +590,6 @@ button.lake-primary-button.lake-button-hovered {
 .lake-resizer-top-right,
 .lake-resizer-bottom-left,
 .lake-resizer-bottom-right {
-  box-sizing: border-box;
   position: absolute;
   width: 12px;
   height: 12px;
@@ -683,7 +689,6 @@ button.lake-primary-button.lake-button-hovered {
   top: 0;
   left: 0;
   z-index: 1;
-  box-sizing: content-box;
   border: 1px solid var(--border-color);
   border-radius: 5px;
   padding: 16px;
@@ -706,7 +711,7 @@ button.lake-primary-button.lake-button-hovered {
   justify-content: space-between;
 }
 .lake-link-popup input[type="text"] {
-  width: 200px;
+  width: 220px;
   margin-right: 4px;
 }
 .lake-link-popup button[name="copy"] svg:first-child {
@@ -728,6 +733,10 @@ button.lake-primary-button.lake-button-hovered {
   margin-bottom: 4px;
   padding: 0;
 }
+.lake-container ol lake-box[type="inline"],
+.lake-container ul lake-box[type="inline"] {
+  vertical-align: middle;
+}
 .lake-container ol[indent="1"],
 .lake-container ul[indent="1"] {
   padding-left: 2em;
@@ -848,7 +857,6 @@ button.lake-primary-button.lake-button-hovered {
 }
 
 .lake-container blockquote {
-  box-sizing: content-box;
   margin: 0;
   margin-bottom: 8px;
   padding: 8px 12px;
@@ -876,7 +884,6 @@ button.lake-primary-button.lake-button-hovered {
 }
 
 .lake-container table {
-  box-sizing: content-box;
   display: block;
   border-collapse: collapse;
   border: 0;
@@ -941,7 +948,6 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block {
 }
 .lake-code-block {
   position: relative;
-  box-sizing: border-box;
   border: 1px solid transparent;
   border-radius: 5px;
 }
@@ -986,7 +992,6 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   border: 1px solid transparent;
   background-color: #fafafa;
   border-radius: 4px;
@@ -1003,7 +1008,6 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
 .lake-image {
   position: relative;
   line-height: 0;
-  box-sizing: content-box;
   border: 1px solid transparent;
   border-radius: 4px;
 }
@@ -1089,21 +1093,18 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
   font-size: 14px;
   font-weight: normal;
   line-height: 0;
-  box-sizing: content-box;
   border: 1px solid transparent;
 }
 lake-box[name="video"] .lake-box-hovered .lake-resizer {
   display: block;
 }
 .lake-video .lake-video-form {
-  box-sizing: content-box;
   padding: 16px;
   line-height: normal;
   border: 1px solid var(--box-border-color);
   border-radius: 4px;
 }
 .lake-video input[type="text"] {
-  box-sizing: border-box;
   font-family: var(--font-family);
   font-size: 14px;
   color: var(--text-color);
@@ -1131,7 +1132,6 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
   padding-top: 16px;
 }
 .lake-video .lake-button-row button {
-  box-sizing: border-box;
   width: 100%;
 }
 
@@ -1140,7 +1140,6 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
   font-size: 16px;
   font-weight: normal;
   line-height: 0;
-  box-sizing: content-box;
   border: 1px solid transparent;
   border-radius: 4px;
 }
@@ -1205,7 +1204,6 @@ lake-box[name="file"] .lake-box-focused .lake-file {
 
 .lake-emoji {
   line-height: 0;
-  box-sizing: content-box;
   border: 1px solid transparent;
   border-radius: 2px;
 }
@@ -1246,7 +1244,6 @@ lake-box[name="equation"] .lake-box-focused .lake-equation {
   top: 28px;
   left: 0;
   z-index: 1;
-  box-sizing: content-box;
   border: 1px solid var(--border-color);
   border-radius: 5px;
   padding: 16px;
@@ -1261,7 +1258,6 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
 }
 .lake-equation .lake-equation-form textarea {
   border: 0;
-  box-sizing: border-box;
   font-family: Consolas, Courier, monospace;
   font-size: 14px;
   color: var(--text-color);
@@ -1284,6 +1280,7 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
 }
 
 .lake-toolbar {
+  box-sizing: border-box;
   font-family: var(--font-family);
   font-size: 14px;
   font-weight: normal;
@@ -1293,8 +1290,12 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
   flex-wrap: wrap;
   align-items: center;
 }
+.lake-toolbar *,
+.lake-toolbar ::before,
+.lake-toolbar ::after {
+  box-sizing: border-box;
+}
 .lake-toolbar .lake-toolbar-divider {
-  box-sizing: content-box;
   width: 1px;
   height: 20px;
   margin: 0 4px;
@@ -1308,14 +1309,15 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
   display: none;
 }
 
-.lake-commands-popup {
+.lake-slash-popup {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
-  box-sizing: content-box;
+  list-style: none;
   border: 1px solid var(--border-color);
   border-radius: 5px;
+  margin: 0;
   padding: 4px 8px;
   width: fit-content;
   font-family: var(--font-family);
@@ -1324,41 +1326,48 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
   background-color: #fff;
   box-shadow: var(--popup-shadow);
   display: none;
-  height: 380px;
+  max-height: 380px;
   overflow-y: scroll;
   scrollbar-width: thin;
+  user-select: none;
 }
-.lake-commands-popup .lake-commands-item {
+.lake-slash-popup .lake-slash-item {
   display: flex;
   cursor: pointer;
   padding: 4px 8px;
+  margin: 0;
   border-radius: 5px;
+  scroll-margin: 4px 0;
 }
-.lake-commands-popup .lake-commands-item-selected {
+.lake-slash-popup .lake-slash-item-selected {
   background-color: var(--background-active-color);
 }
-.lake-commands-popup .lake-commands-icon {
-  margin-right: 8px;
+.lake-slash-popup .lake-slash-item input[type="file"] {
+  display: none;
+}
+.lake-slash-popup .lake-slash-icon {
+  margin-inline-end: 8px;
   border-radius: 5px;
   border: 1px solid var(--border-color);
   background-color: #fff;
 }
-.lake-commands-popup .lake-commands-icon svg {
+.lake-slash-popup .lake-slash-icon svg,
+.lake-slash-popup .lake-slash-icon img {
   width: 32px;
   height: 32px;
   margin: 6px;
 }
-.lake-commands-popup .lake-commands-text {
+.lake-slash-popup .lake-slash-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-.lake-commands-popup .lake-commands-title {
+.lake-slash-popup .lake-slash-title {
   font-weight: 500;
   color: var(--text-color);
 }
-.lake-commands-popup .lake-commands-description {
-  color: var(--secondary-text-color);
+.lake-slash-popup .lake-slash-description {
+  color: #8c8c8c;
 }
 
 /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */