lakelib 0.4.3 → 0.4.5

package/lib/lake.css

@@ -449,7 +449,7 @@ button.lake-primary-button.lake-button-hovered {
 .lake-dropdown-menu {
   position: absolute;
   top: 30px;
-  right: 0;
+  right: auto;
   z-index: var(--lake-popup-z-index);
   list-style: none;
   margin: 0;
@@ -1334,131 +1334,6 @@ lake-box[name="hr"] .lake-box-focused .lake-hr {
   border-top: 1px solid var(--lake-border-color);
 }
 
-/* variables */
-:root {
-  --lake-code-highlight-keyword: #af00db;
-  --lake-code-highlight-name: #444d56;
-  --lake-code-highlight-function: #005cc5;
-  --lake-code-highlight-constant: #0550ae;
-  --lake-code-highlight-definition: #444d56;
-  --lake-code-highlight-type: #0550ae;
-  --lake-code-highlight-operator: #444d56;
-  --lake-code-highlight-comment: #008000;
-  --lake-code-highlight-heading: #000080;
-  --lake-code-highlight-boolean: #0550ae;
-  --lake-code-highlight-string: #a31515;
-  --lake-code-highlight-number: #098658;
-  --lake-code-highlight-invalid: #cd3131;
-}
-
-.lake-dark {
-  --lake-code-highlight-keyword: #b392f0;
-  --lake-code-highlight-name: #e1e4e8;
-  --lake-code-highlight-function: #61afef;
-  --lake-code-highlight-constant: #9ecBff;
-  --lake-code-highlight-definition: #e1e4e8;
-  --lake-code-highlight-type: #9ecBff;
-  --lake-code-highlight-operator: #e1e4e8;
-  --lake-code-highlight-comment: #6a9955;
-  --lake-code-highlight-heading: #569cd6;
-  --lake-code-highlight-boolean: #9ecBff;
-  --lake-code-highlight-string: #ce9178;
-  --lake-code-highlight-number: #b5cea8;
-  --lake-code-highlight-invalid: #f44747;
-}
-
-/* CodeMirror */
-.cm-editor {
-  font-size: 14px;
-  border-radius: 5px;
-  color: var(--lake-text-color);
-  background-color: var(--lake-box-background-color);
-}
-
-.cm-editor.cm-focused {
-  outline: none;
-}
-
-.cm-editor .cm-content {
-  font-family: Consolas, Courier, monospace;
-  margin: 16px 20px;
-  caret-color: var(--lake-text-color);
-}
-
-/* code block */
-lake-box[name="codeBlock"] .lake-box-focused .lake-code-block,
-lake-box[name="codeBlock"] .lake-box-activated .lake-code-block {
-  border-color: var(--lake-box-border-color);
-}
-
-.lake-code-block {
-  position: relative;
-  border: 1px solid transparent;
-  border-radius: 5px;
-}
-
-.lake-code-block .lake-dropdown {
-  position: absolute;
-  top: 2px;
-  inset-inline-end: 2px;
-  display: none;
-}
-
-lake-box[name="codeBlock"] .lake-box-focused .lake-code-block .lake-dropdown,
-lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
-  display: block;
-}
-
-.lake-code-block .lake-dropdown .lake-dropdown-title {
-  margin: 0;
-  padding-right: 4px;
-  background-color: var(--lake-box-background-color);
-}
-
-.lake-code-block .lake-dropdown.lake-list-dropdown .lake-dropdown-title-hovered {
-  background-color: var(--lake-button-background-active-color);
-}
-
-.lake-code-block .lake-dropdown .lake-dropdown-text {
-  margin: 3px 6px;
-}
-
-.lake-code-block .lake-dropdown .lake-dropdown-down-icon svg {
-  margin: 5px 2px;
-}
-
-.lake-code-block .lake-dropdown .lake-dropdown-menu {
-  top: 24px;
-  left: auto;
-  right: 0;
-}
-
-.lake-code-block-error {
-  font-size: 14px;
-  color: var(--lake-error-color);
-  border-radius: 5px;
-  background-color: var(--lake-box-background-color);
-  padding: 16px 20px;
-}
-
-
-/* for HTML preview */
-.lake-container pre[class*=lang-] {
-  margin: 0;
-  font-size: 14px;
-  font-family: Consolas, Courier, monospace;
-  border-radius: 5px;
-  color: var(--lake-text-color);
-  background-color: var(--lake-box-background-color);
-  margin-bottom: 16px;
-  padding: 16px 20px;
-}
-
-.lake-container pre[class*=lang-] code {
-  display: block;
-  background-color: transparent;
-}
-
 .lake-image-placeholder {
   display: flex;
   align-items: center;
@@ -1601,6 +1476,81 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
   cursor: pointer;
 }
 
+.lake-media-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  background-color: var(--lake-box-placeholder-background-color);
+  border-radius: 4px;
+}
+
+.lake-media-placeholder svg {
+  width: 50%;
+  max-width: 64px;
+  height: 50%;
+  max-height: 64px;
+  fill: var(--lake-box-placeholder-text-color);
+}
+
+.lake-media {
+  position: relative;
+  font-size: var(--lake-font-size);
+  font-weight: normal;
+  line-height: 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.lake-media-placeholder,
+.lake-media video {
+  width: 560px;
+  height: 315px;
+}
+
+/* uploading status */
+.lake-media .lake-progress {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  z-index: 1;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .4);
+  line-height: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+}
+
+.lake-media .lake-progress svg {
+  fill: #fff;
+  width: 16px;
+  height: 16px;
+  margin: 6px;
+  animation: lakerotate 1s linear 0s infinite normal none;
+}
+
+.lake-media .lake-progress .lake-percent {
+  font-size: 14px;
+  color: #fff;
+  margin: 6px;
+  white-space: nowrap;
+}
+
+/* error status */
+.lake-media-error .lake-media-placeholder {
+  border: 1px solid var(--lake-box-border-color);
+  background-color: transparent;
+}
+
+lake-box[name="media"] .lake-box-selected .lake-media-placeholder {
+  background-color: var(--lake-selection-background-color);
+}
+
+.lake-media-error .lake-media-placeholder svg {
+  fill: var(--lake-error-color);
+}
+
 .lake-file {
   position: relative;
   font-size: var(--lake-font-size);
@@ -1684,6 +1634,131 @@ lake-box[name="file"] .lake-box-focused .lake-file {
   color: var(--lake-error-color);
 }
 
+/* variables */
+:root {
+  --lake-code-highlight-keyword: #af00db;
+  --lake-code-highlight-name: #444d56;
+  --lake-code-highlight-function: #005cc5;
+  --lake-code-highlight-constant: #0550ae;
+  --lake-code-highlight-definition: #444d56;
+  --lake-code-highlight-type: #0550ae;
+  --lake-code-highlight-operator: #444d56;
+  --lake-code-highlight-comment: #008000;
+  --lake-code-highlight-heading: #000080;
+  --lake-code-highlight-boolean: #0550ae;
+  --lake-code-highlight-string: #a31515;
+  --lake-code-highlight-number: #098658;
+  --lake-code-highlight-invalid: #cd3131;
+}
+
+.lake-dark {
+  --lake-code-highlight-keyword: #b392f0;
+  --lake-code-highlight-name: #e1e4e8;
+  --lake-code-highlight-function: #61afef;
+  --lake-code-highlight-constant: #9ecBff;
+  --lake-code-highlight-definition: #e1e4e8;
+  --lake-code-highlight-type: #9ecBff;
+  --lake-code-highlight-operator: #e1e4e8;
+  --lake-code-highlight-comment: #6a9955;
+  --lake-code-highlight-heading: #569cd6;
+  --lake-code-highlight-boolean: #9ecBff;
+  --lake-code-highlight-string: #ce9178;
+  --lake-code-highlight-number: #b5cea8;
+  --lake-code-highlight-invalid: #f44747;
+}
+
+/* CodeMirror */
+.cm-editor {
+  font-size: 14px;
+  border-radius: 5px;
+  color: var(--lake-text-color);
+  background-color: var(--lake-box-background-color);
+}
+
+.cm-editor.cm-focused {
+  outline: none;
+}
+
+.cm-editor .cm-content {
+  font-family: Consolas, Courier, monospace;
+  margin: 16px 20px;
+  caret-color: var(--lake-text-color);
+}
+
+/* code block */
+lake-box[name="codeBlock"] .lake-box-focused .lake-code-block,
+lake-box[name="codeBlock"] .lake-box-activated .lake-code-block {
+  border-color: var(--lake-box-border-color);
+}
+
+.lake-code-block {
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: 5px;
+}
+
+.lake-code-block .lake-dropdown {
+  position: absolute;
+  top: 2px;
+  inset-inline-end: 2px;
+  display: none;
+}
+
+lake-box[name="codeBlock"] .lake-box-focused .lake-code-block .lake-dropdown,
+lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
+  display: block;
+}
+
+.lake-code-block .lake-dropdown .lake-dropdown-title {
+  margin: 0;
+  padding-right: 4px;
+  background-color: var(--lake-box-background-color);
+}
+
+.lake-code-block .lake-dropdown.lake-list-dropdown .lake-dropdown-title-hovered {
+  background-color: var(--lake-button-background-active-color);
+}
+
+.lake-code-block .lake-dropdown .lake-dropdown-text {
+  margin: 3px 6px;
+}
+
+.lake-code-block .lake-dropdown .lake-dropdown-down-icon svg {
+  margin: 5px 2px;
+}
+
+.lake-code-block .lake-dropdown .lake-dropdown-menu {
+  top: 24px;
+  left: auto;
+  right: 0;
+}
+
+.lake-code-block-error {
+  font-size: 14px;
+  color: var(--lake-error-color);
+  border-radius: 5px;
+  background-color: var(--lake-box-background-color);
+  padding: 16px 20px;
+}
+
+
+/* for HTML preview */
+.lake-container pre[class*=lang-] {
+  margin: 0;
+  font-size: 14px;
+  font-family: Consolas, Courier, monospace;
+  border-radius: 5px;
+  color: var(--lake-text-color);
+  background-color: var(--lake-box-background-color);
+  margin-bottom: 16px;
+  padding: 16px 20px;
+}
+
+.lake-container pre[class*=lang-] code {
+  display: block;
+  background-color: transparent;
+}
+
 .lake-emoji {
   line-height: 0;
   border: 1px solid transparent;

package/lib/lake.d.ts

@@ -481,7 +481,7 @@ type RootTranslation = {
          */
         hr: string;
         /**
-         * V​i​d​e​o
+         * Y​o​u​T​u​b​e
          */
         video: string;
         /**
@@ -556,6 +556,10 @@ type RootTranslation = {
          * I​m​a​g​e
          */
         image: string;
+        /**
+         * V​i​d​e​o
+         */
+        media: string;
         /**
          * F​i​l​e
          */
@@ -569,7 +573,7 @@ type RootTranslation = {
          */
         equation: string;
         /**
-         * X​ ​(​T​w​i​t​t​e​r​)
+         * X​ ​(​T​w​e​e​t​)
          */
         twitter: string;
         /**
@@ -723,11 +727,11 @@ type RootTranslation = {
          */
         codeBlockDesc: string;
         /**
-         * V​i​d​e​o
+         * Y​o​u​T​u​b​e
          */
         video: string;
         /**
-         * I​n​s​e​r​t​ ​a​ ​v​i​d​e​o​ ​f​r​o​m​ ​Y​o​u​T​u​b​e
+         * I​n​s​e​r​t​ ​a​ ​Y​o​u​T​u​b​e​ ​v​i​d​e​o
          */
         videoDesc: string;
         /**
@@ -739,11 +743,11 @@ type RootTranslation = {
          */
         equationDesc: string;
         /**
-         * T​w​i​t​t​e​r
+         * T​w​e​e​t
          */
         twitter: string;
         /**
-         * I​n​s​e​r​t​ ​a​ ​p​o​s​t​ ​f​r​o​m​ ​X​ ​(​T​w​i​t​t​e​r​)
+         * I​n​s​e​r​t​ ​a​n​ ​X​ ​(​T​w​e​e​t​)
          */
         twitterDesc: string;
         /**
@@ -950,6 +954,16 @@ type RootTranslation = {
          */
         captionPlaceholder: string;
     };
+    media: {
+        /**
+         * D​o​w​n​l​o​a​d
+         */
+        download: string;
+        /**
+         * D​e​l​e​t​e
+         */
+        remove: string;
+    };
     file: {
         /**
          * D​o​w​n​l​o​a​d
@@ -970,7 +984,7 @@ type RootTranslation = {
          */
         remove: string;
         /**
-         * P​a​s​t​e​ ​a​ ​l​i​n​k​ ​t​o​ ​e​m​b​e​d​ ​a​ ​v​i​d​e​o​ ​f​r​o​m​ ​Y​o​u​T​u​b​e​.
+         * P​a​s​t​e​ ​y​o​u​r​ ​Y​o​u​T​u​b​e​ ​l​i​n​k​ ​b​e​l​o​w​.
          */
         description: string;
         /**
@@ -1012,7 +1026,7 @@ type RootTranslation = {
          */
         remove: string;
         /**
-         * P​a​s​t​e​ ​a​ ​l​i​n​k​ ​t​o​ ​e​m​b​e​d​ ​a​ ​p​o​s​t​ ​f​r​o​m​ ​X​.
+         * P​a​s​t​e​ ​y​o​u​r​ ​X​ ​(​T​w​i​t​t​e​r​)​ ​l​i​n​k​ ​b​e​l​o​w​.
          */
         description: string;
         /**
@@ -1128,7 +1142,7 @@ type TranslationFunctions = {
          */
         hr: () => LocalizedString;
         /**
-         * Video
+         * YouTube
          */
         video: () => LocalizedString;
         /**
@@ -1203,6 +1217,10 @@ type TranslationFunctions = {
          * Image
          */
         image: () => LocalizedString;
+        /**
+         * Video
+         */
+        media: () => LocalizedString;
         /**
          * File
          */
@@ -1216,7 +1234,7 @@ type TranslationFunctions = {
          */
         equation: () => LocalizedString;
         /**
-         * X (Twitter)
+         * X (Tweet)
          */
         twitter: () => LocalizedString;
         /**
@@ -1370,11 +1388,11 @@ type TranslationFunctions = {
          */
         codeBlockDesc: () => LocalizedString;
         /**
-         * Video
+         * YouTube
          */
         video: () => LocalizedString;
         /**
-         * Insert a video from YouTube
+         * Insert a YouTube video
          */
         videoDesc: () => LocalizedString;
         /**
@@ -1386,11 +1404,11 @@ type TranslationFunctions = {
          */
         equationDesc: () => LocalizedString;
         /**
-         * Twitter
+         * Tweet
          */
         twitter: () => LocalizedString;
         /**
-         * Insert a post from X (Twitter)
+         * Insert an X (Tweet)
          */
         twitterDesc: () => LocalizedString;
         /**
@@ -1596,6 +1614,16 @@ type TranslationFunctions = {
          */
         captionPlaceholder: () => LocalizedString;
     };
+    media: {
+        /**
+         * Download
+         */
+        download: () => LocalizedString;
+        /**
+         * Delete
+         */
+        remove: () => LocalizedString;
+    };
     file: {
         /**
          * Download
@@ -1616,7 +1644,7 @@ type TranslationFunctions = {
          */
         remove: () => LocalizedString;
         /**
-         * Paste a link to embed a video from YouTube.
+         * Paste your YouTube link below.
          */
         description: () => LocalizedString;
         /**
@@ -1658,7 +1686,7 @@ type TranslationFunctions = {
          */
         remove: () => LocalizedString;
         /**
-         * Paste a link to embed a post from X.
+         * Paste your X (Twitter) link below.
          */
         description: () => LocalizedString;
         /**
@@ -2378,7 +2406,7 @@ declare class Toolbar {
 }
 
 type ShowMessage = (type: 'success' | 'error' | 'warning', message: string) => void;
-type DownloadFile = (type: 'image' | 'file', url: string) => void;
+type DownloadFile = (type: 'image' | 'media' | 'file', url: string) => void;
 interface Config {
     value: string;
     readonly: boolean;
@@ -2682,6 +2710,13 @@ interface BoxComponent {
     html?: RenderBoxHTML;
 }
 
+interface CornerToolbarItem {
+    name: string;
+    icon?: string;
+    tooltip: string | ((locale: TranslationFunctions) => string);
+    onClick: (event: Event) => void;
+}
+
 interface MentionItem {
     id: string;
     name: string;
@@ -2941,5 +2976,36 @@ declare class Dropdown {
     unmount(): void;
 }
 
-export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range$1 as Range, TextParser, Toolbar, addMark, createIframeBox, deleteContents, getBox, getContentRules, icons, insertBlock, insertBookmark, insertBox, insertContents, modifierText, query, removeBox, removeMark, setBlocks, splitBlock, splitMarks, template, toBookmark, toHex };
-export type { ActiveItem, BoxComponent, BoxValue, CommandItem, ContentRules, DropdownItem, DropdownMenuItem, EditorConfig, InitializePlugin, KeyValue, MentionItem, NodePath, SelectionState, SlashButtonItem, SlashItem, SlashUploadItem, ToolbarButtonItem, ToolbarConfig, ToolbarDropdownItem, ToolbarItem, ToolbarUploadItem, Translation, UnmountPlugin };
+interface CornerToolbarConfig {
+    locale?: TranslationFunctions;
+    root: string | Node | Nodes;
+    items: CornerToolbarItem[];
+}
+declare class CornerToolbar {
+    private config;
+    private locale;
+    private root;
+    container: Nodes;
+    constructor(config: CornerToolbarConfig);
+    private appendButton;
+    render(): void;
+}
+
+interface ResizerConfig {
+    root: string | Node | Nodes;
+    target: string | Node | Nodes;
+    onResize?: (width: number, height: number) => void;
+    onStop: (width: number, height: number) => void;
+}
+declare class Resizer {
+    private config;
+    private root;
+    private target;
+    container: Nodes;
+    constructor(config: ResizerConfig);
+    private bindEvents;
+    render(): void;
+}
+
+export { Box, Button, CornerToolbar, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range$1 as Range, Resizer, TextParser, Toolbar, addMark, createIframeBox, deleteContents, getBox, getContentRules, icons, insertBlock, insertBookmark, insertBox, insertContents, modifierText, query, removeBox, removeMark, setBlocks, splitBlock, splitMarks, template, toBookmark, toHex };
+export type { ActiveItem, BoxComponent, BoxType, BoxValue, CommandItem, ContentRules, CornerToolbarItem, DropdownItem, DropdownMenuItem, EditorConfig, InitializePlugin, KeyValue, MentionItem, NodePath, SelectionState, SlashButtonItem, SlashItem, SlashUploadItem, ToolbarButtonItem, ToolbarConfig, ToolbarDropdownItem, ToolbarItem, ToolbarUploadItem, Translation, TranslationFunctions, UnmountPlugin };