@humandialog/forms.svelte 1.5.1 → 1.6.1

package/components/combo/combo.svelte

@@ -7,6 +7,7 @@ import { FaChevronDown, FaTimes } from "svelte-icons/fa";
 import Icon from "../icon.svelte";
 import { reef } from "@humandialog/auth.svelte/dist/index.js";
 import { showMenu } from "../menu.js";
+import { ext, i18n } from "../../i18n.js";
 export let label = "";
 export let self = null;
 export let a = "";
@@ -229,7 +230,7 @@ function openDropdownAsMenu() {
   let operations = [];
   if (hasNone)
     operations.push({
-      caption: "<none>",
+      caption: `<${i18n({ en: "blank", es: "blanco", pl: "pusty" })}>`,
       action: (f) => on_choose(null)
     });
   if (definition && definition.collection)
@@ -237,12 +238,11 @@ function openDropdownAsMenu() {
   const _filtered_source = filtered_source ? filtered_source : definition.source;
   _filtered_source.forEach((i) => {
     operations.push({
-      caption: i.Name ?? i.Key,
+      caption: i.Name ? ext(i.Name) : i.Key,
       icon: i.Icon ?? void 0,
       action: (f) => on_choose(i)
     });
   });
-  console.log("operations", operations);
   showMenu(rect, operations);
 }
 export function hide() {
@@ -295,7 +295,7 @@ function get_combo_text() {
   if (!is_dropdown_open) {
     let found = selected_item(item, a);
     if (found)
-      return found.Name ?? found.Key;
+      return found.Name ? ext(found.Name) : found.Key;
     else
       return placeholder;
   } else

package/components/contextmenu.svelte

@@ -2,7 +2,16 @@
 import Icon from "./icon.svelte";
 import { contextItemsStore, pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
-import { hideWholeContextMenu, showMenu, showFloatingToolbar, showGridMenu } from "./menu";
+import {
+  hideWholeContextMenu,
+  showMenu,
+  showFloatingToolbar,
+  showGridMenu,
+  SHOW_MENU_BELOW,
+  SHOW_MENU_ABOVE,
+  SHOW_MENU_RIGHT,
+  SHOW_MENU_LEFT
+} from "./menu";
 import { FaTimes } from "svelte-icons/fa";
 export let widthPx = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
@@ -17,11 +26,12 @@ let focused_index = 0;
 let menu_items = [];
 let submenus = [];
 let around_rect;
+let around_preference = 0;
 let css_position = "";
 let closeButtonPos = "";
 $:
   display = visible ? "block" : "none";
-function calculatePosition(x2, y2, around, visible2, fresh) {
+function calculatePosition(x2, y2, visible2, fresh) {
   let result = "";
   if (!visible2) {
     result = "display: none";
@@ -66,36 +76,115 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
     if (myRect) {
       const m = 15;
       let screenRect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
-      let xShifted = false;
-      if (myRect.right > screenRect.right) {
-        x2 = screenRect.right - myRect.width + m;
-        xShifted = true;
-      }
-      let yShifted = false;
-      if (myRect.bottom > screenRect.bottom) {
-        y2 = screenRect.bottom - myRect.height;
-        if (around) {
-          if (xShifted)
-            x2 -= around.width;
-          else
-            y2 -= around.height;
+      if (around_rect) {
+        const menuWidth = myRect.width;
+        const menuHeight = myRect.height;
+        let topArea;
+        let bottomArea;
+        let leftArea;
+        let rightArea;
+        switch (around_preference) {
+          case SHOW_MENU_BELOW:
+            topArea = around_rect.top - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.bottom;
+            leftArea = around_rect.right - screenRect.left;
+            rightArea = screenRect.right - around_rect.left;
+            if (menuHeight <= bottomArea)
+              y2 = around_rect.bottom;
+            else if (menuHeight <= topArea)
+              y2 = around_rect.top - menuHeight;
+            if (menuWidth <= rightArea)
+              x2 = around_rect.left;
+            else if (menuWidth <= leftArea)
+              x2 = around_rect.right - menuWidth;
+            break;
+          case SHOW_MENU_ABOVE:
+            topArea = around_rect.top - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.bottom;
+            leftArea = around_rect.right - screenRect.left;
+            rightArea = screenRect.right - around_rect.left;
+            if (menuHeight <= topArea)
+              y2 = around_rect.top - menuHeight;
+            else if (menuHeight <= bottomArea)
+              y2 = around_rect.bottom;
+            if (menuWidth <= rightArea)
+              x2 = around_rect.left;
+            else if (menuWidth <= leftArea)
+              x2 = around_rect.right - menuWidth;
+            break;
+          case SHOW_MENU_RIGHT:
+            topArea = around_rect.bottom - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.top;
+            leftArea = around_rect.left - screenRect.left;
+            rightArea = screenRect.right - around_rect.right;
+            if (menuWidth <= rightArea)
+              x2 = around_rect.right;
+            else if (menuWidth <= leftArea)
+              x2 = around_rect.left - menuWidth;
+            if (menuHeight <= bottomArea)
+              y2 = around_rect.top;
+            else if (menuHeight <= topArea)
+              y2 = around_rect.bottom - menuHeight;
+            break;
+          case SHOW_MENU_LEFT:
+            topArea = around_rect.bottom - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.top;
+            leftArea = around_rect.left - screenRect.left;
+            rightArea = screenRect.right - around_rect.right;
+            if (menuWidth <= leftArea)
+              x2 = around_rect.left - menuWidth;
+            else if (menuWidth <= rightArea)
+              x2 = around_rect.right;
+            if (menuHeight <= bottomArea)
+              y2 = around_rect.top;
+            else if (menuHeight <= topArea)
+              y2 = around_rect.bottom - menuHeight;
+            break;
         }
-        yShifted = true;
+      } else {
+        if (myRect.right > screenRect.right)
+          x2 = screenRect.right - myRect.width + m;
+        if (myRect.bottom > screenRect.bottom)
+          y2 = screenRect.bottom - myRect.height;
+        if (myRect.left < screenRect.left)
+          x2 = screenRect.left;
+        if (myRect.top < screenRect.top)
+          y2 = screenRect.top;
       }
-      if (myRect.left < screenRect.left)
-        x2 = screenRect.left;
-      if (myRect.top < screenRect.top)
-        y2 = screenRect.top;
     }
     result = `left:${x2}px; top:${y2}px; display: block; min-width: 15rem`;
     closeButtonPos = "";
   }
   return result;
 }
-export async function show(around, _operations) {
+function intersects(lpRect1, lpRect2) {
+  const left = Math.max(lpRect1.left, lpRect2.left);
+  const right = Math.min(lpRect1.right, lpRect2.right);
+  const top = Math.max(lpRect1.top, lpRect2.top);
+  const bottom = Math.min(lpRect1.bottom, lpRect2.bottom);
+  return left <= right && top <= bottom;
+}
+export async function show(around, _operations, preference = 0) {
   if (around instanceof DOMRect) {
-    x = around.left;
-    y = around.bottom;
+    switch (preference) {
+      case SHOW_MENU_BELOW:
+        x = around.left;
+        y = around.bottom;
+        break;
+      case SHOW_MENU_ABOVE:
+        x = around.left;
+        y = around.top;
+        break;
+      case SHOW_MENU_RIGHT:
+        x = around.right;
+        y = around.top;
+        break;
+      case SHOW_MENU_LEFT:
+        x = around.left;
+        y = around.top;
+        break;
+    }
+    around_preference = preference;
     around_rect = around;
   } else if (around instanceof DOMPoint) {
     x = around.x;
@@ -103,7 +192,7 @@ export async function show(around, _operations) {
     around_rect = new DOMRect(x, y, 0, 0);
   }
   visible = true;
-  css_position = calculatePosition(x, y, around_rect, true, true);
+  css_position = calculatePosition(x, y, true, true);
   operations = [..._operations];
   focused_index = operations.findIndex((o) => !o.disabled);
   const is_root_menu = owner_menu_item == void 0;
@@ -132,7 +221,7 @@ export async function show(around, _operations) {
     });
   }
   await tick();
-  css_position = calculatePosition(x, y, around_rect, true, false);
+  css_position = calculatePosition(x, y, true, false);
   if (is_root_menu)
     menu_root.addEventListener("click", on_before_container_click, true);
   if (menu_items.length && !isDeviceSmallerThan("sm"))
@@ -145,7 +234,7 @@ export function hide() {
   if (false)
     popToolsActionsOperations();
   visible = false;
-  css_position = calculatePosition(x, y, around_rect, false, false);
+  css_position = calculatePosition(x, y, false, false);
   window.removeEventListener("click", on_before_window_click, true);
   menu_root?.removeEventListener("click", on_before_container_click, true);
 }
@@ -211,7 +300,8 @@ function on_mouse_move(index) {
     focus_menu_item(index);
 }
 function execute_action(e, operation, index) {
-  if (operation.menu) {
+  const mobile = isDeviceSmallerThan("sm");
+  if (operation.menu && !mobile) {
     focus_menu_item(index);
     return;
   }
@@ -223,7 +313,6 @@ function execute_action(e, operation, index) {
     owner = owner.parentElement;
   if (operation.preAction)
     operation.preAction(owner);
-  const mobile = isDeviceSmallerThan("sm");
   if (operation.action) {
     operation.action(owner, around_rect);
   } else {
@@ -239,6 +328,8 @@ function execute_action(e, operation, index) {
         showMenu(rect, operation.grid);
       else
         showGridMenu(rect, operation.grid);
+    } else if (operation.menu) {
+      showMenu(rect, operation.menu);
     }
   }
 }
@@ -382,6 +473,12 @@ function calculateBackground(is_highlighted, active) {
                         {@const cc = mobile ? 7 : 6}
                         {@const icon_size = icon_placeholder_size - cc}
                         <Icon s="md" component={operation.icon}/>
+                    {:else if operation.img}
+                        {@const cc = mobile ? 7 : 6}
+                        {@const icon_size = icon_placeholder_size - cc}
+                        <div class="w-4 h-4">
+                            <img src={operation.img} alt=""/>
+                        </div>
                     {:else}
                         {@const cc = mobile ? 7 : 6}
                         {@const icon_size = icon_placeholder_size - cc}

package/components/contextmenu.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         widthPx?: number | undefined;
         menu_items_id_prefix?: string | undefined;
         owner_menu_item?: HTMLElement | undefined;
-        show?: ((around: DOMRect | DOMPoint, _operations: any) => Promise<void>) | undefined;
+        show?: ((around: DOMRect | DOMPoint, _operations: any, preference?: number) => Promise<void>) | undefined;
         isVisible?: (() => boolean) | undefined;
         hide?: (() => void) | undefined;
         getRenderedRect?: (() => DOMRect | undefined) | undefined;
@@ -18,7 +18,7 @@ export type ContextmenuProps = typeof __propDef.props;
 export type ContextmenuEvents = typeof __propDef.events;
 export type ContextmenuSlots = typeof __propDef.slots;
 export default class Contextmenu extends SvelteComponentTyped<ContextmenuProps, ContextmenuEvents, ContextmenuSlots> {
-    get show(): (around: DOMRect | DOMPoint, _operations: any) => Promise<void>;
+    get show(): (around: DOMRect | DOMPoint, _operations: any, preference?: number) => Promise<void>;
     get isVisible(): () => boolean;
     get hide(): () => void;
     get getRenderedRect(): () => DOMRect | undefined;

package/components/date_utils.d.ts

@@ -1,5 +1,5 @@
 export function getFormattedStringDate(d: any, type?: string): string;
 export function getNiceStringDateTime(d: any): string;
-export function getNiceStringDate(d: any): string;
-export function dayName(d: any): "" | "Sun" | "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat";
-export function monthName(m: any): "" | "Jan" | "Feb" | "Mar" | "Apr" | "May" | "Jun" | "Jul" | "Aug" | "Sep" | "Oct" | "Nov" | "Dec";
+export function getNiceStringDate(d: any): any;
+export function dayName(d: any): any;
+export function monthName(m: any): any;

package/components/date_utils.js

@@ -1,4 +1,6 @@
 
+import {getCurrentLanguageKey} from '../i18n.js'
+
 export function getFormattedStringDate(d, type = "datetime")
 {
     if(!d)
@@ -86,11 +88,11 @@ export function getNiceStringDate(d)
         
         let days_diff = day - current_day;
         if(days_diff == 0)
-            return 'Today';
+            return today();
         else if(days_diff == 1)
-            return 'Tomorrow';
+            return tomorrow();
         else if(days_diff == -1)
-            return 'Yesterday';
+            return yesterday();
         else if(days_diff > 0 && days_diff <= 7)
         {
             if(day_of_week > current_day_of_week)
@@ -122,67 +124,68 @@ export function getNiceStringDate(d)
     }
 }
 
-export function dayName(d)
+function today()
 {
-    switch(d)
-    {
-    case 0:
-        return 'Sun';
-    
-    case 1:
-        return 'Mon';
-
-    case 2:
-        return 'Tue';
-
-    case 3:
-        return 'Wed';
+    const lang = getCurrentLanguageKey()
+    if(Object.keys(abbrCloseLang).includes(lang))
+        return abbrCloseLang[lang][1]
+    else
+        return abbrCloseLang.en[1]
+}
 
-    case 4:
-        return 'Thu';
+function tomorrow()
+{
+    const lang = getCurrentLanguageKey()
+    if(Object.keys(abbrCloseLang).includes(lang))
+        return abbrCloseLang[lang][2]
+    else
+        return abbrCloseLang.en[2]
+}
 
-    case 5:
-        return 'Fri';
+function yesterday()
+{
+    const lang = getCurrentLanguageKey()
+    if(Object.keys(abbrCloseLang).includes(lang))
+        return abbrCloseLang[lang][0]
+    else
+        return abbrCloseLang.en[0]
+}
 
-    case 6:
-        return 'Sat';
-    
-    case 7:
-        return 'Sun';
-    }
 
-    return '';
+export function dayName(d)
+{
+    const lang = getCurrentLanguageKey()
+    if(Object.keys(abbrDaysLang).includes(lang))
+        return abbrDaysLang[lang][d]
+    else
+        return abbrDaysLang.en[d]
 }
 
 export function monthName(m)
 {
-    switch(m)
-    {
-        case 0:
-            return "Jan";
-        case 1:
-            return "Feb";
-        case 2:
-            return "Mar";
-        case 3:
-            return "Apr";
-        case 4:
-            return "May";
-        case 5:
-            return "Jun";
-        case 6:
-            return "Jul";
-        case 7:
-            return "Aug";
-        case 8:
-            return "Sep";
-        case 9:
-            return "Oct";
-        case 10:
-            return "Nov";
-        case 11:
-            return "Dec";
-    }
+    const lang = getCurrentLanguageKey()
+    if(Object.keys(abbrMonthsLang).includes(lang))
+        return abbrMonthsLang[lang][m]
+    else
+        return abbrMonthsLang.en[m]
+}
+
+// translations
+
+const abbrCloseLang = {
+    en: ['yesterday', 'today', 'tomorrow'],
+    es: ['ayer', 'hoy', 'mañana'],
+    pl: ['wczoraj', 'dziś', 'jutro']
+}
+
+const abbrDaysLang = {
+    en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    es: ['dom', 'lun', 'mar', 'miérc', 'juev', 'vier', 'sáb', 'dom'],
+    pl: ['nie', 'pon', 'wto', 'śro', 'czw', 'pią', 'sob', 'nie'] 
+}
 
-    return '';
+const abbrMonthsLang = {
+    en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    es: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'set', 'oct', 'nov', 'dic'],
+    pl: ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru']
 }

package/components/document/editor.svelte

@@ -55,6 +55,7 @@ import IcH3 from "./internal/h3.icon.svelte";
 import IcH4 from "./internal/h4.icon.svelte";
 import { Extension } from "@tiptap/core";
 import { Suggestion } from "./internal/suggestion";
+import { i18n } from "../../i18n.js";
 export let value = "";
 export let placeholder = "";
 export let self = null;
@@ -100,7 +101,7 @@ export function getFormattingOperations(withCaptions = false) {
 }
 export function getMarksOperations(tbr = "A") {
   let operations = [];
-  paletteMarksCommands.forEach((c2) => {
+  paletteMarksCommands().forEach((c2) => {
     if (!c2.separator) {
       operations.push({
         caption: c2.caption,
@@ -111,7 +112,7 @@ export function getMarksOperations(tbr = "A") {
     }
   });
   return {
-    caption: "Text",
+    caption: i18n({ en: "Text", es: "Texto", pl: "Tekst" }),
     operations,
     preAction: (f) => {
       if (editor.isFocused)
@@ -122,7 +123,7 @@ export function getMarksOperations(tbr = "A") {
 }
 export function getStylesOperations(tbr = "A") {
   let operations = [];
-  paletteStylesCommands.forEach((c2) => {
+  paletteStylesCommands().forEach((c2) => {
     if (!c2.separator) {
       operations.push({
         caption: c2.caption,
@@ -133,7 +134,7 @@ export function getStylesOperations(tbr = "A") {
     }
   });
   return {
-    caption: "Styles",
+    caption: i18n({ en: "Styles", es: "Estilos", pl: "Style" }),
     operations,
     preAction: (f) => {
       if (editor.isFocused)
@@ -149,7 +150,7 @@ export function getInsertOperations(tbr = "A") {
       operations = [...operations, exc];
     });
   }
-  paletteInsertCommands.forEach((c2) => {
+  paletteInsertCommands().forEach((c2) => {
     if (!c2.separator) {
       operations.push({
         caption: c2.caption,
@@ -160,7 +161,7 @@ export function getInsertOperations(tbr = "A") {
     }
   });
   return {
-    caption: "Insert",
+    caption: i18n({ en: "Insert", es: "Insertar", pl: "Wstaw" }),
     operations,
     preAction: (f) => {
       if (editor.isFocused)
@@ -1012,51 +1013,51 @@ export function preventBlur() {
 export function hasChanged() {
   return hasChangedValue;
 }
-const paletteMarksCommands = [
-  { caption: "Bold", description: "Marks text as bolded", tags: "strong", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
-  { caption: "Italic", description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
-  { caption: "Underlie", description: "Marks text as underlined", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
-  { caption: "Strikethrough", description: "Marks text as strikethrough", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") }
+const paletteMarksCommands = () => [
+  { caption: i18n({ en: "Bold", es: "Negrita", pl: "Pogrubiony" }), description: "Marks text as bolded", tags: "strong", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
+  { caption: i18n({ en: "Italic", es: "Cursiva", pl: "Kursywa" }), description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
+  { caption: i18n({ en: "Underline", es: "Subrayar", pl: "Podkre\u015Blenie" }), description: "Marks text as underlined", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
+  { caption: i18n({ en: "Strikethrough", es: "Tachado", pl: "Przekre\u015Blenie" }), description: "Marks text as strikethrough", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") }
 ];
-const paletteStylesCommands = [
-  { caption: "Normal", description: "This is normal text style", tags: "paragraph,text", icon: FaRemoveFormat, on_choice: (range) => {
+const paletteStylesCommands = () => [
+  { caption: i18n({ en: "Normal", es: "Normal", pl: "Normalny" }), description: "This is normal text style", tags: "paragraph,text", icon: FaRemoveFormat, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setParagraph().run();
     else
       editor.chain().focus().setParagraph().run();
   }, is_active: () => editor?.isActive("paragraph") },
-  { caption: "Heading 1", description: "Description heading", tags: "h1", icon: IcH1, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 1", es: "T\xEDtulo 1", pl: "Nag\u0142\xF3wek 1" }), description: "Description heading", tags: "h1", icon: IcH1, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run();
     else
       editor.chain().focus().setHeading({ level: 1 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 1 }) },
-  { caption: "Heading 2", description: "Secondary heading", tags: "h2", icon: IcH2, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 2", es: "T\xEDtulo 2", pl: "Nag\u0142\xF3wek 2" }), description: "Secondary heading", tags: "h2", icon: IcH2, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run();
     else
       editor.chain().focus().setHeading({ level: 2 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 2 }) },
-  { caption: "Heading 3", description: "Secondary heading", tags: "h3", icon: IcH3, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 3", es: "T\xEDtulo 3", pl: "Nag\u0142\xF3wek 3" }), description: "Secondary heading", tags: "h3", icon: IcH3, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run();
     else
       editor.chain().focus().setHeading({ level: 3 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 3 }) },
-  { caption: "Heading 4", description: "Secondary heading", tags: "h4", icon: IcH4, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 4", es: "T\xEDtulo 4", pl: "Nag\u0142\xF3wek 4" }), description: "Secondary heading", tags: "h4", icon: IcH4, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 4 }).run();
     else
       editor.chain().focus().setHeading({ level: 4 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 4 }) },
-  { caption: "Code", description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
+  { caption: i18n({ en: "Code", es: "C\xF3digo", pl: "Kod" }), description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setCodeBlock().run();
     else
       editor.chain().focus().setCodeBlock().run();
   }, is_active: () => editor?.isActive("CodeBlock") },
   //    {   caption: 'Comment',      description: 'With this you can comment the above paragraph',   icon: FaComment,                    on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsComment().run(); else editor.chain().focus().setAsComment().run() }, is_active: () => editor?.isActive('CommentBlock')  } ,
-  { caption: "Quote", description: "To quote someone", icon: FaQuoteRight, on_choice: (range) => {
+  { caption: i18n({ en: "Quote", es: "Cita", pl: "Cytat" }), description: "To quote someone", icon: FaQuoteRight, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setAsQuote().run();
     else
@@ -1064,27 +1065,27 @@ const paletteStylesCommands = [
   }, is_active: () => editor?.isActive("QuoteBlock") },
   //    {   caption: 'Warning',      description: 'An important warning to above paragraph',         icon: FaExclamationTriangle,        on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsWarning().run(); else editor.chain().focus().setAsWarning().run() }, is_active: () => editor?.isActive('WarningBlock')  } ,
   //    {   caption: 'Info',         description: 'An important info about above paragraph',         icon: FaInfo,                       on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsInfo().run(); else editor.chain().focus().setAsInfo().run() }, is_active: () => editor?.isActive('InfoBlock')  },
-  { caption: "Bullet list", description: "Unordered list of items", icon: FaListUl, on_choice: (range) => {
+  { caption: i18n({ en: "BulletList", es: "Lista con vi\xF1etas", pl: "Lista punktowana" }), description: "Unordered list of items", icon: FaListUl, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).toggleBulletList().run();
     else
       editor.chain().focus().toggleBulletList().run();
   }, is_active: () => editor?.isActive("bulletList") }
 ];
-const paletteInsertCommands = [
-  { caption: "Image", description: "Add image to document", tags: "img,picture", icon: FaImage, on_choice: (range) => {
+const paletteInsertCommands = () => [
+  { caption: i18n({ en: "Image", es: "Imagen", pl: "Obraz" }), description: "Add image to document", tags: "img,picture", icon: FaImage, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).run();
     if (onAddImage)
       onAddImage(onAddedImageReady);
   } },
-  { caption: "Table", description: "Table", icon: FaTable, on_choice: (range) => {
+  { caption: i18n({ en: "Table", es: "Tabla", pl: "Tabela" }), description: "Table", icon: FaTable, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).insertTable().run();
     else
       editor.chain().focus().insertTable().run();
   }, is_active: () => editor?.isActive("table") },
-  { caption: "Horizontal rule", description: "Add horizonal role", tags: "hr", icon: FaGripLines, on_choice: (range) => {
+  { caption: i18n({ en: "Horizontal rule", es: "Regla horizontal", pl: "Pozioma linia" }), description: "Add horizonal role", tags: "hr", icon: FaGripLines, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHorizontalRule().run();
     else
@@ -1092,12 +1093,21 @@ const paletteInsertCommands = [
   } }
 ];
 const paletteCommands = [
-  { caption: "Text", separator: true },
-  ...paletteMarksCommands,
-  { caption: "Styles", separator: true },
-  ...paletteStylesCommands,
-  { caption: "Insert", separator: true },
-  ...paletteInsertCommands
+  {
+    caption: i18n({ en: "Text", es: "Texto", pl: "Tekst" }),
+    separator: true
+  },
+  ...paletteMarksCommands(),
+  {
+    caption: i18n({ en: "Styles", es: "Estilos", pl: "Style" }),
+    separator: true
+  },
+  ...paletteStylesCommands(),
+  {
+    caption: i18n({ en: "Insert", es: "Insertar", pl: "Wstaw" }),
+    separator: true
+  },
+  ...paletteInsertCommands()
 ];
 function makeBold(range) {
   if (range) {
@@ -1152,11 +1162,11 @@ function getPaletteCommands() {
     });
     commands.push({ separator: true });
   }
-  commands = [...commands, { caption: "Text", separator: true }];
-  commands = [...commands, ...paletteMarksCommands];
-  commands = [...commands, { caption: "Styles", separator: true }];
-  commands = [...commands, ...paletteStylesCommands];
-  commands = [...commands, { caption: "Insert", separator: true }];
+  commands = [...commands, { caption: i18n({ en: "Text", es: "Texto", pl: "Tekst" }), separator: true }];
+  commands = [...commands, ...paletteMarksCommands()];
+  commands = [...commands, { caption: i18n({ en: "Styles", es: "Estilos", pl: "Style" }), separator: true }];
+  commands = [...commands, ...paletteStylesCommands()];
+  commands = [...commands, { caption: i18n({ en: "Insert", es: "Insertar", pl: "Wstaw" }), separator: true }];
   if (extraInsertPaletteCommands && extraInsertPaletteCommands.length > 0) {
     extraInsertPaletteCommands.forEach((exc) => {
       commands.push({
@@ -1179,7 +1189,7 @@ function getPaletteCommands() {
       });
     });
   }
-  commands = [...commands, ...paletteInsertCommands];
+  commands = [...commands, ...paletteInsertCommands()];
   if (extraBackPaletteCommands && extraBackPaletteCommands.length > 0) {
     commands.push({ separator: true });
     extraBackPaletteCommands.forEach((exc) => {