lakelib 0.2.4 → 0.2.5

package/lib/{types/css → css}/index.d.ts

@@ -24,3 +24,4 @@ import './equation.css';
 import './mention.css';
 import './slash.css';
 import './toolbar.css';
+import './floating-toolbar.css';

package/lib/{types/i18n/ja → i18n/en-US}/index.d.ts

@@ -102,6 +102,15 @@ declare const _default: {
         loadingError: string;
         zoomOut: string;
         zoomIn: string;
+        align: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
+        resize: string;
+        pageWidth: string;
+        originalWidth: string;
+        imageWidth: string;
+        open: string;
     };
     file: {
         download: string;

package/lib/{types/i18n/en-US → i18n/ja}/index.d.ts

@@ -102,6 +102,15 @@ declare const _default: {
         loadingError: string;
         zoomOut: string;
         zoomIn: string;
+        align: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
+        resize: string;
+        pageWidth: string;
+        originalWidth: string;
+        imageWidth: "{0} 画像サイズ";
+        open: string;
     };
     file: {
         download: string;

package/lib/{types/i18n → i18n}/ko/index.d.ts

@@ -102,6 +102,15 @@ declare const _default: {
         loadingError: string;
         zoomOut: string;
         zoomIn: string;
+        align: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
+        resize: string;
+        pageWidth: string;
+        originalWidth: string;
+        imageWidth: "{0} 이미지 크기";
+        open: string;
     };
     file: {
         download: string;

package/lib/{types/i18n → i18n}/types.d.ts

@@ -1,4 +1,4 @@
-import type { BaseTranslation as BaseTranslationType, LocalizedString } from 'typesafe-i18n';
+import type { BaseTranslation as BaseTranslationType, LocalizedString, RequiredParams } from 'typesafe-i18n';
 export type BaseTranslation = BaseTranslationType;
 export type BaseLocale = 'en-US';
 export type Locales = 'en-US' | 'ja' | 'ko' | 'zh-CN';
@@ -51,7 +51,7 @@ type RootTranslation = {
          */
         alignRight: string;
         /**
-         * A​l​i​g​n​ ​j​u​s​t​i​f​y
+         * J​u​s​t​i​f​y
          */
         alignJustify: string;
         /**
@@ -343,7 +343,7 @@ type RootTranslation = {
          */
         url: string;
         /**
-         * L​i​n​k​ ​t​i​t​l​e
+         * T​e​x​t​ ​t​o​ ​d​i​s​p​l​a​y
          */
         title: string;
         /**
@@ -385,7 +385,7 @@ type RootTranslation = {
          */
         close: string;
         /**
-         * T​h​e​ ​i​m​a​g​e​ ​c​a​n​n​o​t​ ​b​e​ ​l​o​a​d​e​d
+         * U​n​a​b​l​e​ ​t​o​ ​l​o​a​d​ ​i​m​a​g​e​.
          */
         loadingError: string;
         /**
@@ -396,6 +396,43 @@ type RootTranslation = {
          * Z​o​o​m​ ​i​n
          */
         zoomIn: string;
+        /**
+         * A​l​i​g​n​m​e​n​t
+         */
+        align: string;
+        /**
+         * A​l​i​g​n​ ​l​e​f​t
+         */
+        alignLeft: string;
+        /**
+         * A​l​i​g​n​ ​c​e​n​t​e​r
+         */
+        alignCenter: string;
+        /**
+         * A​l​i​g​n​ ​r​i​g​h​t
+         */
+        alignRight: string;
+        /**
+         * R​e​s​i​z​e​ ​i​m​a​g​e
+         */
+        resize: string;
+        /**
+         * P​a​g​e​ ​w​i​d​t​h
+         */
+        pageWidth: string;
+        /**
+         * O​r​i​g​i​n​a​l​ ​w​i​d​t​h
+         */
+        originalWidth: string;
+        /**
+         * {​0​}​ ​i​m​a​g​e​ ​w​i​d​t​h
+         * @param {unknown} 0
+         */
+        imageWidth: RequiredParams<'0'>;
+        /**
+         * O​p​e​n​ ​i​m​a​g​e​ ​i​n​ ​n​e​w​ ​t​a​b
+         */
+        open: string;
     };
     file: {
         /**
@@ -441,7 +478,7 @@ type RootTranslation = {
          */
         save: string;
         /**
-         * H​e​l​p
+         * S​u​p​p​o​r​t​e​d​ ​f​u​n​c​t​i​o​n​s
          */
         help: string;
         /**
@@ -497,7 +534,7 @@ export type TranslationFunctions = {
          */
         alignRight: () => LocalizedString;
         /**
-         * Align justify
+         * Justify
          */
         alignJustify: () => LocalizedString;
         /**
@@ -789,7 +826,7 @@ export type TranslationFunctions = {
          */
         url: () => LocalizedString;
         /**
-         * Link title
+         * Text to display
          */
         title: () => LocalizedString;
         /**
@@ -831,7 +868,7 @@ export type TranslationFunctions = {
          */
         close: () => LocalizedString;
         /**
-         * The image cannot be loaded
+         * Unable to load image.
          */
         loadingError: () => LocalizedString;
         /**
@@ -842,6 +879,42 @@ export type TranslationFunctions = {
          * Zoom in
          */
         zoomIn: () => LocalizedString;
+        /**
+         * Alignment
+         */
+        align: () => LocalizedString;
+        /**
+         * Align left
+         */
+        alignLeft: () => LocalizedString;
+        /**
+         * Align center
+         */
+        alignCenter: () => LocalizedString;
+        /**
+         * Align right
+         */
+        alignRight: () => LocalizedString;
+        /**
+         * Resize image
+         */
+        resize: () => LocalizedString;
+        /**
+         * Page width
+         */
+        pageWidth: () => LocalizedString;
+        /**
+         * Original width
+         */
+        originalWidth: () => LocalizedString;
+        /**
+         * {0} image width
+         */
+        imageWidth: (arg0: unknown) => LocalizedString;
+        /**
+         * Open image in new tab
+         */
+        open: () => LocalizedString;
     };
     file: {
         /**
@@ -887,7 +960,7 @@ export type TranslationFunctions = {
          */
         save: () => LocalizedString;
         /**
-         * Help
+         * Supported functions
          */
         help: () => LocalizedString;
         /**

package/lib/{types/i18n → i18n}/zh-CN/index.d.ts

@@ -102,6 +102,15 @@ declare const _default: {
         loadingError: string;
         zoomOut: string;
         zoomIn: string;
+        align: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
+        resize: string;
+        pageWidth: string;
+        originalWidth: string;
+        imageWidth: "{0} 图片大小";
+        open: string;
     };
     file: {
         download: string;

package/lib/lake.css

@@ -1,7 +1,7 @@
 :root {
-  /* font family */
+  /* common */
   --lake-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
-  /* common color */
+  --lake-font-size: 16px;
   --lake-text-color: #000000e0;
   --lake-secondary-text-color: #000000a6;
   --lake-border-color: #d9d9d9;
@@ -10,8 +10,6 @@
   --lake-success-color: #52c41a;
   --lake-warning-color: #faad14;
   --lake-error-color: #ff4d4f;
-  /* z-index */
-  --lake-z-index-popup: 822;
   /* selection */
   --lake-selection-background-color: #1ba2e333;
   /* link */
@@ -21,12 +19,16 @@
   --lake-box-border-color: #d9d9d9;
   --lake-box-border-focus-color: #1677ff;
   --lake-box-background-color: #f6f8fa;
+  /* popup */
+  --lake-popup-z-index: 822;
+  --lake-popup-font-size: 14px;
+  --lake-popup-border-color: #d9d9d9;
+  --lake-popup-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
   /* button */
+  --lake-button-font-size: 14px;
   --lake-button-shadow: 0 2px 0 #00000005;
   --lake-button-outline: 2px solid #69b1ff;
-  /* popup */
-  --lake-popup-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
-  /* input form */
+  /* input element, text field */
   --lake-input-border-color: #d9d9d9;
   --lake-input-border-hover-color: #69b1ff;
   --lake-input-outline: 2px solid #69b1ff;
@@ -47,7 +49,7 @@
 .lake-container {
   box-sizing: border-box;
   font-family: var(--lake-font-family);
-  font-size: 16px;
+  font-size: var(--lake-font-size);
   font-weight: normal;
   line-height: 1.45;
   padding: 16px 24px;
@@ -195,34 +197,12 @@ lake-box .lake-button-group button svg {
   height: 16px;
   margin: 6px;
 }
-/* box toolbar */
-.lake-box-toolbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: var(--lake-z-index-popup);
-  border: 1px solid var(--lake-border-color);
-  border-radius: 5px;
-  background-color: #fff;
-  box-shadow: 0 2px 0 #00000005;
-  padding: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-.lake-box-toolbar .lake-toolbar-divider {
-  width: 1px;
-  height: 20px;
-  margin: 0 4px;
-  border-left: 1px solid var(--lake-border-color);
-  user-select: none;
-}
 
 button.lake-button {
   border-radius: 5px;
   border: 0;
   font-family: Arial;
-  font-size: 14px;
+  font-size: var(--lake-button-font-size);
   color: var(--lake-text-color);
   background-color: #fff;
   padding: 0;
@@ -287,14 +267,14 @@ button.lake-primary-button.lake-button-hovered {
   position: relative;
   font-family: var(--lake-font-family);
   color: var(--lake-text-color);
-  font-size: 14px;
+  font-size: var(--lake-button-font-size);
   user-select: none;
 }
 .lake-dropdown button.lake-dropdown-title {
   border-radius: 5px;
   border: 0;
   font-family: Arial;
-  font-size: 14px;
+  font-size: var(--lake-button-font-size);
   color: var(--lake-text-color);
   background-color: #fff;
   padding: 0;
@@ -366,11 +346,11 @@ button.lake-primary-button.lake-button-hovered {
   position: absolute;
   top: 30px;
   left: 0;
-  z-index: var(--lake-z-index-popup);
+  z-index: var(--lake-popup-z-index);
   list-style: none;
   margin: 0;
   padding: 6px 0;
-  border: 1px solid var(--lake-border-color);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
   background-color: #fff;
   box-shadow: var(--lake-popup-shadow);
@@ -536,7 +516,7 @@ button.lake-primary-button.lake-button-hovered {
 }
 .lake-color-dropdown-menu li:first-child .lake-dropdown-menu-text {
   width: 100%;
-  font-size: 14px;
+  font-size: var(--lake-button-font-size);
   border: 1px solid transparent;
   height: auto;
 }
@@ -544,7 +524,7 @@ button.lake-primary-button.lake-button-hovered {
 .lake-popup {
   box-sizing: border-box;
   font-family: var(--lake-font-family);
-  font-size: 14px;
+  font-size: var(--lake-popup-font-size);
   font-weight: normal;
   line-height: normal;
   color: var(--lake-text-color);
@@ -554,12 +534,12 @@ button.lake-primary-button.lake-button-hovered {
 .lake-popup ::after {
   box-sizing: border-box;
 }
-.lake-popup button {
+.lake-popup .lake-text-button {
   box-shadow: var(--lake-button-shadow);
 }
 .lake-popup input[type="text"] {
   font-family: var(--lake-font-family);
-  font-size: 14px;
+  font-size: var(--lake-popup-font-size);
   color: var(--lake-text-color);
   border-radius: 5px;
   border: 1px solid var(--lake-input-border-color);
@@ -580,9 +560,9 @@ button.lake-primary-button.lake-button-hovered {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: var(--lake-z-index-popup);
+  z-index: var(--lake-popup-z-index);
   list-style: none;
-  border: 1px solid var(--lake-border-color);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
   margin: 0;
   padding: 4px 8px;
@@ -714,8 +694,8 @@ button.lake-primary-button.lake-button-hovered {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: var(--lake-z-index-popup);
-  border: 1px solid var(--lake-border-color);
+  z-index: var(--lake-popup-z-index);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
   padding: 16px;
   width: fit-content;
@@ -1160,7 +1140,7 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
 
 .lake-file {
   position: relative;
-  font-size: 16px;
+  font-size: var(--lake-font-size);
   font-weight: normal;
   line-height: 0;
   border: 1px solid transparent;
@@ -1403,3 +1383,25 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
 .lake-toolbar .lake-upload input[type="file"] {
   display: none;
 }
+
+.lake-floating-toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--lake-popup-z-index);
+  border: 1px solid var(--lake-border-color);
+  border-radius: 5px;
+  background-color: #fff;
+  box-shadow: 0 2px 0 #00000005;
+  padding: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.lake-floating-toolbar .lake-toolbar-divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  border-left: 1px solid var(--lake-border-color);
+  user-select: none;
+}