lakelib 0.1.15 → 0.1.17

package/lib/lake.css

@@ -60,7 +60,7 @@
   color: inherit;
   background: var(--selection-background-color);
 }
-.lake-container.lake-show-placeholder::before {
+.lake-container.lake-placeholder::before {
   position: absolute;
   top: 8px;
   left: 12px;
@@ -231,6 +231,7 @@ button.lake-button {
   padding: 0;
   margin: 0 1px;
   line-height: 0;
+  white-space: nowrap;
   cursor: pointer;
   user-select: none;
 }
@@ -310,7 +311,8 @@ button.lake-primary-button.lake-button-hovered {
   cursor: default;
 }
 .lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered,
-.lake-dropdown.lake-icon-dropdown button.lake-dropdown-title-hovered {
+.lake-dropdown.lake-icon-dropdown button.lake-dropdown-title-hovered,
+.lake-dropdown.lake-character-dropdown button.lake-dropdown-title-hovered {
   background-color: var(--background-hover-color);
 }
 .lake-dropdown button.lake-dropdown-title.lake-dropdown-title-no-down {
@@ -380,6 +382,10 @@ button.lake-primary-button.lake-button-hovered {
   top: auto;
   bottom: 30px;
 }
+.lake-dropdown .lake-dropdown-menu.lake-dropdown-menu-with-scroll {
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}
 .lake-dropdown .lake-dropdown-menu li {
   display: flex;
   align-items: center;
@@ -446,6 +452,34 @@ button.lake-primary-button.lake-button-hovered {
 .lake-dropdown .lake-icon-dropdown-menu li .lake-dropdown-menu-text {
   display: none;
 }
+/* character type */
+.lake-dropdown .lake-character-dropdown-menu {
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.lake-dropdown .lake-character-dropdown-menu li {
+  padding: 0;
+  border-radius: 2px;
+}
+.lake-dropdown .lake-character-dropdown-menu li.lake-dropdown-item-hovered {
+  background-color: var(--background-hover-color);
+}
+.lake-dropdown .lake-character-dropdown-menu li.lake-dropdown-item-selected {
+  background-color: var(--background-active-color);
+}
+.lake-dropdown .lake-character-dropdown-menu li .lake-dropdown-menu-check {
+  display: none;
+}
+.lake-dropdown .lake-character-dropdown-menu li .lake-dropdown-menu-icon {
+  display: none;
+}
+.lake-dropdown .lake-character-dropdown-menu li .lake-dropdown-menu-text {
+  text-align: center;
+  font-size: 24px;
+  width: 42px;
+  height: 42px;
+  line-height: 42px;
+}
 /* color type */
 .lake-dropdown .lake-color-dropdown-menu {
   flex-wrap: wrap;
@@ -939,9 +973,6 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   top: 24px;
   left: auto;
   right: 0;
-  overflow-y: scroll;
-  scrollbar-width: thin;
-  height: 200px;
 }
 .lake-code-block-error {
   font-size: 14px;
@@ -1121,6 +1152,9 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
   cursor: pointer;
   user-select: auto;
 }
+lake-box[name="file"] .lake-box-strip {
+  align-self: center;
+}
 .lake-file .lake-file-info {
   display: flex;
   align-items: center;
@@ -1186,6 +1220,69 @@ lake-box[name="emoji"] .lake-box-focused .lake-emoji {
   background-color: var(--selection-background-color);
 }
 
+.lake-equation {
+  position: relative;
+  font-weight: normal;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.lake-container[contenteditable="true"] .lake-equation {
+  user-select: none;
+}
+lake-box[name="equation"] .lake-box-strip {
+  align-self: center;
+}
+lake-box[name="equation"] .lake-box-selected .lake-equation {
+  background-color: var(--selection-background-color);
+}
+lake-box[name="equation"] .lake-box-focused .lake-equation {
+  background-color: var(--selection-background-color);
+}
+.lake-equation .lake-equation-view {
+  padding: 0 6px;
+}
+.lake-equation .lake-equation-form {
+  position: absolute;
+  top: 28px;
+  left: 0;
+  z-index: 1;
+  box-sizing: content-box;
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  padding: 16px;
+  width: fit-content;
+  background-color: #fff;
+  box-shadow: var(--popup-shadow);
+  display: none;
+}
+lake-box[name="equation"] .lake-box-focused .lake-equation-form,
+lake-box[name="equation"] .lake-box-activated .lake-equation-form {
+  display: flex;
+}
+.lake-equation .lake-equation-form textarea {
+  border: 0;
+  box-sizing: border-box;
+  font-family: Consolas, Courier, monospace;
+  font-size: 14px;
+  color: var(--text-color);
+  padding: 0;
+  margin-right: 8px;
+  width: 300px;
+  height: 80px;
+  resize: none;
+  scrollbar-width: thin;
+}
+.lake-equation .lake-equation-form textarea:focus-visible {
+  outline: 0;
+}
+/* error status */
+.lake-equation-error {
+  padding: 0 6px;
+  font-size: 14px;
+  color: var(--error-color);
+  background-color: var(--box-background-color);
+}
+
 .lake-toolbar {
   font-family: var(--font-family);
   font-size: 14px;
@@ -1210,3 +1307,56 @@ lake-box[name="emoji"] .lake-box-focused .lake-emoji {
 .lake-toolbar .lake-upload input[type="file"] {
   display: none;
 }
+
+.lake-commands-popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  box-sizing: content-box;
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  padding: 4px 8px;
+  width: fit-content;
+  font-family: var(--font-family);
+  font-size: 14px;
+  color: var(--text-color);
+  background-color: #fff;
+  box-shadow: var(--popup-shadow);
+  display: none;
+  height: 380px;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}
+.lake-commands-popup .lake-commands-item {
+  display: flex;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 5px;
+}
+.lake-commands-popup .lake-commands-item-selected {
+  background-color: var(--background-active-color);
+}
+.lake-commands-popup .lake-commands-icon {
+  margin-right: 8px;
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+  background-color: #fff;
+}
+.lake-commands-popup .lake-commands-icon svg {
+  width: 32px;
+  height: 32px;
+  margin: 6px;
+}
+.lake-commands-popup .lake-commands-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.lake-commands-popup .lake-commands-title {
+  font-weight: 500;
+  color: var(--text-color);
+}
+.lake-commands-popup .lake-commands-description {
+  color: var(--secondary-text-color);
+}