@humandialog/forms.svelte 1.5.0 → 1.6.0

package/components/breadcrumb.svelte

@@ -3,6 +3,7 @@
 	import { breadcrumbParse, breadcrumbStringify } from './breadcrumb_utils';
 	
     export let path;
+    export let collapseLonger = false
 
     let segments = []
     let userClass = $$props.class ?? ''
@@ -34,24 +35,39 @@
             {#each segments as segment, idx (segment.href)}
                 {@const isFirst = idx == 0}
                 {@const isLast = idx == segments.length-1}
-                <li>
-                    <div class="flex items-center">
-                        {#if !isFirst}
-                            <svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-                            </svg>
-                        {/if}
-                        {#if isLast}
-                            <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
-                                {segment.name}
-                            </span>
-                        {:else}
-                            <a href={getSegmentHRef(segment.href, idx)} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
-                                {segment.name}
-                            </a>
-                        {/if}
-                    </div>
-                </li>
+                {@const collapsable = collapseLonger && segments.length > 5}
+                {@const isCollapsed = collapsable && idx > 0 && idx < segments.length-3}
+                {@const isFirstCollapsed = isCollapsed && idx == 1}
+                
+                {#if isCollapsed}
+                    {#if isFirstCollapsed}
+                        <svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                        </svg>
+                        <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
+                            ...
+                        </span>
+                    {/if}
+                {:else}
+                    <li>
+                        <div class="flex items-center">
+                            {#if !isFirst}
+                                <svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                                </svg>
+                            {/if}
+                            {#if isLast}
+                                <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
+                                    {segment.name}
+                                </span>
+                            {:else}
+                                <a href={getSegmentHRef(segment.href, idx)} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
+                                    {segment.name}
+                                </a>
+                            {/if}
+                        </div>
+                    </li>
+                {/if}
             {/each}
         {/if}
     

package/components/breadcrumb.svelte.d.ts

@@ -4,6 +4,7 @@
 export default class Breadcrumb extends SvelteComponentTyped<{
     [x: string]: any;
     path: any;
+    collapseLonger?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,6 +17,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         path: any;
+        collapseLonger?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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/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) => {

package/components/document/editor.svelte.d.ts

@@ -25,19 +25,19 @@ declare const __propDef: {
         run?: ((onStop?: undefined) => void) | undefined;
         getFormattingOperations?: ((withCaptions?: boolean) => any[]) | undefined;
         getMarksOperations?: ((tbr?: string) => {
-            caption: string;
+            caption: any;
             operations: any[];
             preAction: (f: any) => void;
             tbr: string;
         }) | undefined;
         getStylesOperations?: ((tbr?: string) => {
-            caption: string;
+            caption: any;
             operations: any[];
             preAction: (f: any) => void;
             tbr: string;
         }) | undefined;
         getInsertOperations?: ((tbr?: string) => {
-            caption: string;
+            caption: any;
             operations: any[];
             preAction: (f: any) => void;
             tbr: string;
@@ -98,19 +98,19 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get run(): (onStop?: undefined) => void;
     get getFormattingOperations(): (withCaptions?: boolean) => any[];
     get getMarksOperations(): (tbr?: string) => {
-        caption: string;
+        caption: any;
         operations: any[];
         preAction: (f: any) => void;
         tbr: string;
     };
     get getStylesOperations(): (tbr?: string) => {
-        caption: string;
+        caption: any;
         operations: any[];
         preAction: (f: any) => void;
         tbr: string;
     };
     get getInsertOperations(): (tbr?: string) => {
-        caption: string;
+        caption: any;
         operations: any[];
         preAction: (f: any) => void;
         tbr: string;

package/components/menu.d.ts

@@ -1,5 +1,9 @@
 import Floating_container from './Floating_container.svelte';
-export declare function showMenu(around: DOMRect | DOMPoint, operations: any): void;
+export declare const SHOW_MENU_BELOW = 0;
+export declare const SHOW_MENU_ABOVE = 1;
+export declare const SHOW_MENU_RIGHT = 2;
+export declare const SHOW_MENU_LEFT = 3;
+export declare function showMenu(around: DOMRect | DOMPoint, operations: any, preference?: number): void;
 export declare function hideWholeContextMenu(): void;
 export declare function showFloatingToolbar(around: DOMRect | DOMPoint, toolbar: any, props?: {}): Floating_container | null;
 export declare function hideFloatingToolbar(): void;

package/components/menu.js

@@ -3,7 +3,11 @@ import Floating_container from './Floating_container.svelte';
 import Grid from './Grid.menu.svelte';
 let menu_comopnent = null;
 let toolbar_component = null;
-export function showMenu(around, operations) {
+export const SHOW_MENU_BELOW = 0;
+export const SHOW_MENU_ABOVE = 1;
+export const SHOW_MENU_RIGHT = 2;
+export const SHOW_MENU_LEFT = 3;
+export function showMenu(around, operations, preference = SHOW_MENU_BELOW) {
     let menu_element = document.getElementById("__hd_svelte_contextmenu");
     if (!menu_element) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
@@ -13,13 +17,13 @@ export function showMenu(around, operations) {
             target: app_div,
             props: {}
         });
-        menu_comopnent.show(around, operations);
+        menu_comopnent.show(around, operations, preference);
     }
     else if (menu_comopnent) {
         if (menu_comopnent.isVisible())
             menu_comopnent.hide();
         else
-            menu_comopnent.show(around, operations);
+            menu_comopnent.show(around, operations, preference);
     }
     else
         console.error('what now?');