lakelib 0.3.9 → 0.3.11

package/lib/lake.css

@@ -23,6 +23,8 @@
   --lake-box-border-color: #d9d9d9;
   --lake-box-border-focus-color: #1677ff;
   --lake-box-background-color: #f6f8fa;
+  --lake-box-placeholder-text-color: #d9d9d9;
+  --lake-box-placeholder-background-color: #fafafa;
   /* popup */
   --lake-popup-z-index: 822;
   --lake-popup-font-size: 14px;
@@ -39,6 +41,7 @@
   /* text field */
   --lake-input-border-color: #d9d9d9;
   --lake-input-border-hover-color: #69b1ff;
+  --lake-input-background-color: #fff;
   --lake-input-outline: 2px solid #69b1ff;
 }
 
@@ -62,6 +65,8 @@
   --lake-box-border-color: #3d444d;
   --lake-box-border-focus-color: #4493f8;
   --lake-box-background-color: #3d444d;
+  --lake-box-placeholder-text-color: #3d444d;
+  --lake-box-placeholder-background-color: #343434;
   /* popup */
   --lake-popup-border-color: #3d444d;
   --lake-popup-background-color: #252525;
@@ -74,6 +79,7 @@
   /* text field */
   --lake-input-border-color: #3d444d;
   --lake-input-border-hover-color: #58a6ff;
+  --lake-input-background-color: #252525;
   --lake-input-outline: 2px solid #58a6ff;
 }
 
@@ -215,6 +221,7 @@ lake-box[type="inline"] {
 lake-box[type="block"] {
   display: block grid;
   grid-template-columns: 1px calc(100% - 2px) 1px;
+  margin-bottom: 16px;
 }
 
 lake-box .lake-box-strip {
@@ -245,7 +252,9 @@ lake-box .lake-box-activated .lake-corner-toolbar {
   display: flex;
 }
 
-lake-box .lake-box-focused .lake-resizer {
+lake-box .lake-box-hovered .lake-resizer,
+lake-box .lake-box-focused .lake-resizer,
+lake-box .lake-box-activated .lake-resizer {
   display: block;
 }
 
@@ -1109,6 +1118,106 @@ button.lake-primary-button.lake-button-hovered {
   user-select: none;
 }
 
+.lake-iframe {
+  position: relative;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 0;
+  border: 0;
+}
+
+.lake-iframe .lake-iframe-form {
+  padding: 24px 16px;
+  line-height: normal;
+  color: var(--lake-text-color);
+  border: 1px solid var(--lake-box-border-color);
+  background-color: var(--lake-box-background-color);
+  border-radius: 4px;
+}
+
+.lake-iframe .lake-description {
+  margin-bottom: 16px;
+  color: var(--lake-secondary-text-color);
+}
+
+.lake-iframe input[type="text"] {
+  font-family: var(--lake-font-family);
+  font-size: 14px;
+  color: var(--lake-text-color);
+  border-radius: 5px;
+  border: 1px solid var(--lake-input-border-color);
+  background-color: var(--lake-input-background-color);
+  padding: 4px 10px;
+  width: 100%;
+}
+
+.lake-iframe input[type="text"]:hover {
+  border: 1px solid var(--lake-input-border-hover-color);
+}
+
+.lake-iframe input[type="text"]:focus-visible {
+  outline: var(--lake-input-outline);
+  outline-offset: -2px;
+}
+
+lake-box[type="inline"] .lake-iframe .lake-iframe-form {
+  min-width: 380px;
+  max-width: 480px;
+}
+
+lake-box[type="inline"] .lake-iframe .lake-input-label {
+  margin-bottom: 8px;
+}
+
+lake-box[type="inline"] .lake-iframe .lake-input-field input[type="text"] {
+  margin-bottom: 16px;
+}
+
+lake-box[type="inline"] .lake-iframe .lake-input-field button {
+  width: 100%;
+}
+
+lake-box[type="block"] .lake-iframe .lake-input-label {
+  display: none;
+}
+
+lake-box[type="block"] .lake-iframe .lake-input-field {
+  display: flex;
+}
+
+lake-box[type="block"] .lake-iframe .lake-input-field input[type="text"] {
+  margin-right: 8px;
+}
+
+.lake-iframe-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  background-color: var(--lake-box-placeholder-background-color);
+  border-radius: 4px;
+}
+
+.lake-iframe-placeholder svg {
+  width: 50%;
+  max-width: 64px;
+  height: 50%;
+  max-height: 64px;
+  fill: var(--lake-box-placeholder-text-color);
+}
+
+.lake-iframe-placeholder span {
+  font-size: 24px;
+  color: var(--lake-box-placeholder-text-color);
+}
+
+.lake-iframe iframe {
+  border-radius: 5px;
+}
+
 .lake-container table {
   display: table;
   border-collapse: collapse;
@@ -1270,10 +1379,6 @@ lake-box[name="hr"] .lake-box-focused .lake-hr {
 }
 
 /* code block */
-lake-box[name="codeBlock"] {
-  margin-bottom: 16px;
-}
-
 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);
@@ -1329,20 +1434,12 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   padding: 16px 20px;
 }
 
-:root {
-  --lake-image-placeholder-background-color: #fafafa;
-}
-
-.lake-dark {
-  --lake-image-placeholder-background-color: #343434;
-}
-
 .lake-image-placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid transparent;
-  background-color: var(--lake-image-placeholder-background-color);
+  background-color: var(--lake-box-placeholder-background-color);
   border-radius: 4px;
   width: 100%;
   height: 100%;
@@ -1353,7 +1450,7 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   max-width: 64px;
   height: 50%;
   max-height: 64px;
-  fill: #d9d9d9;
+  fill: var(--lake-box-placeholder-text-color);
 }
 
 .lake-image {
@@ -1479,64 +1576,6 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
   cursor: pointer;
 }
 
-.lake-video {
-  position: relative;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 0;
-  border: 1px solid transparent;
-}
-
-lake-box[name="video"] .lake-box-hovered .lake-resizer {
-  display: block;
-}
-
-.lake-video .lake-video-form {
-  padding: 16px;
-  line-height: normal;
-  color: var(--lake-text-color);
-  border: 1px solid var(--lake-box-border-color);
-  background-color: var(--lake-box-background-color);
-  border-radius: 4px;
-}
-
-.lake-video input[type="text"] {
-  font-family: var(--lake-font-family);
-  font-size: 14px;
-  color: var(--lake-text-color);
-  border-radius: 5px;
-  border: 1px solid var(--lake-input-border-color);
-  padding: 4px 10px;
-  width: 100%;
-}
-
-.lake-video input[type="text"]:hover {
-  border: 1px solid var(--lake-input-border-hover-color);
-}
-
-.lake-video input[type="text"]:focus-visible {
-  outline: var(--lake-input-outline);
-  outline-offset: -2px;
-}
-
-.lake-video .lake-row {
-  padding-bottom: 8px;
-}
-
-.lake-video .lake-desc-row {
-  padding-top: 8px;
-  padding-bottom: 16px;
-  color: var(--lake-secondary-text-color);
-}
-
-.lake-video .lake-button-row {
-  padding-top: 16px;
-}
-
-.lake-video .lake-button-row button {
-  width: 100%;
-}
-
 .lake-file {
   position: relative;
   font-size: var(--lake-font-size);

package/lib/lake.d.ts

@@ -567,6 +567,10 @@ type TranslationFunctions = {
          * Mathematical formula
          */
         equation: () => LocalizedString;
+        /**
+         * X (Twitter)
+         */
+        twitter: () => LocalizedString;
         /**
          * Remove color
          */
@@ -733,6 +737,14 @@ type TranslationFunctions = {
          * Insert a TeX expression
          */
         equationDesc: () => LocalizedString;
+        /**
+         * Twitter
+         */
+        twitter: () => LocalizedString;
+        /**
+         * Insert a post from X (Twitter)
+         */
+        twitterDesc: () => LocalizedString;
         /**
          * Image
          */
@@ -988,6 +1000,28 @@ type TranslationFunctions = {
          */
         placeholder: () => LocalizedString;
     };
+    twitter: {
+        /**
+         * Embed Tweet
+         */
+        embed: () => LocalizedString;
+        /**
+         * Delete
+         */
+        remove: () => LocalizedString;
+        /**
+         * Paste a link to embed a post from X.
+         */
+        description: () => LocalizedString;
+        /**
+         * Link
+         */
+        url: () => LocalizedString;
+        /**
+         * Please enter a valid link.
+         */
+        urlError: () => LocalizedString;
+    };
 };
 
 type NativeRange = Range;
@@ -2025,6 +2059,77 @@ declare function toHex(value: string): string;
  */
 declare function getBox(boxNode: string | Node | Nodes): Box;
 
+/**
+ * Configuration object that defines the iframe box behavior and appearance.
+ */
+interface IframeBoxConfig {
+    /**
+     * The type of the box.
+     */
+    type: BoxType;
+    /**
+     * The name of the iframe box component.
+     */
+    name: string;
+    /**
+     * The default width of the iframe.
+     */
+    width: string;
+    /**
+     * The default height of the iframe.
+     */
+    height: string;
+    /**
+     * Description text for the form, which can be localized.
+     */
+    formDescription: string | ((locale: TranslationFunctions) => string);
+    /**
+     * Label for the URL input field, which can be localized.
+     */
+    urlLabel?: string | ((locale: TranslationFunctions) => string);
+    /**
+     * Placeholder text for the URL input field.
+     */
+    urlPlaceholder: string;
+    /**
+     * Text for the embed button, which can be localized.
+     */
+    embedButtonText: string | ((locale: TranslationFunctions) => string);
+    /**
+     * Tooltip text for the delete button, which can be localized.
+     */
+    deleteButtonText: string | ((locale: TranslationFunctions) => string);
+    /**
+     * Function to validate the inputted URL.
+     */
+    validUrl: (url: string) => boolean;
+    /**
+     * Error message shown if URL validation fails.
+     */
+    urlError: string | ((locale: TranslationFunctions) => string);
+    /**
+     * Placeholder text shown while the iframe is loading.
+     */
+    iframePlaceholder?: string;
+    /**
+     * Function to generate attributes for the iframe element.
+     */
+    iframeAttributes: (url: string) => Record<string, string>;
+    /**
+     * Callback executed before the iframe loads.
+     */
+    beforeIframeLoad?: (box: Box) => void;
+    /**
+     * If true, allows resizing of the iframe.
+     */
+    resize?: boolean;
+}
+/**
+ * Creates an iframe box component with configurable properties.
+ * This component supports rendering an iframe with customizable attributes, resizing, and toolbar functionalities.
+ */
+declare function createIframeBox(config: IframeBoxConfig): BoxComponent;
+
 /**
  * The HTMLParser interface provides the ability to parse an HTML string according to specified rules.
  */
@@ -2156,4 +2261,5 @@ declare class Dropdown {
     unmount(): void;
 }
 
-export { type ActiveItem, Box, type BoxComponent, type BoxValue, Button, type CommandItem, type ContentRules, Dropdown, type DropdownItem, type DropdownMenuItem, Editor, Fragment, HTMLParser, type InitializePlugin, type KeyValue, type MentionItem, type NodePath, Nodes, Range$1 as Range, type SelectionState, type SlashButtonItem, type SlashItem, type SlashUploadItem, TextParser, Toolbar, type ToolbarButtonItem, type ToolbarDropdownItem, type ToolbarItem, type ToolbarUploadItem, type UnmountPlugin, addMark, deleteContents, getBox, getContentRules, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock, splitMarks, template, toBookmark, toHex };
+export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range$1 as Range, TextParser, Toolbar, addMark, createIframeBox, deleteContents, getBox, getContentRules, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock, splitMarks, template, toBookmark, toHex };
+export type { ActiveItem, BoxComponent, BoxValue, CommandItem, ContentRules, DropdownItem, DropdownMenuItem, InitializePlugin, KeyValue, MentionItem, NodePath, SelectionState, SlashButtonItem, SlashItem, SlashUploadItem, ToolbarButtonItem, ToolbarDropdownItem, ToolbarItem, ToolbarUploadItem, UnmountPlugin };